如何暂时阻止滚动

Question

我正在尝试重现以下效果：http://tympanus.net/Development/ArticleIntroEffects/ and i got this far: http://codepen.io/vlrprbttst/pen/LGMVyj

与演示的唯一区别是滚动管理。在我的示例中，如果滚动太多，您会发现自己在页面中滚动得太远。这是我想阻止的事情。相反，在 codrops 示例中，滚动似乎暂时被阻止，并且在消失的动画完成后重新启用。header。

我试过这个：

function intro() {
  var wh = window.innerHeight;
  $(".header").css("height", wh);
  $(".subsection").css("padding-top", (wh / 3 * 2));

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var header = $(".header");
    var subsection = $(".subsection");
    if (scroll >= 1) {
      header.addClass("header--scrolled");
      subsection.addClass("header--scrolled");
      $("body").css("overflow","hidden");
      header.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
        function(e) {
        $("body").css("overflow","scroll");
        });
    } else {
      $(".subsection").removeClass("header--scrolled");
      $(".header").removeClass("header--scrolled");
    }
  });
};
intro();

所以基本上，如果你滚动 +1 个像素，你会得到 $("body").css("overflow","hidden");，一旦转换完成，你会回到 $("body").css("overflow","scroll");

但这不起作用。知道我该怎么做吗？

Answer 1

为了让 .header 必须在位置 absolute。

我已经添加了一个变量 topT 用于检查是否在顶部以及一个用于不滚动页面的计时器。

请尝试：

代码笔：http://codepen.io/anon/pen/XXOdwN

HTML

<div class="header">
  <h1>hello visitor</h1> 
</div>
<div class="subsection">
  <div class="subsection--inner">
    <h2>welcome</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor ipsum eu lacus commodo pulvinar. Donec nec facilisis augue. Nulla in magna iaculis, sagittis dolor vitae, scelerisque risus. Cras fermentum rhoncus nunc, vel gravida sapien tempor at.
      Aliquam rhoncus, metus ac egestas aliquam, augue augue vulputate dolor, id sodales lorem sem quis lectus. Etiam rhoncus neque ligula. Ut ornare nec diam non sodales. Vivamus venenatis congue tellus vitae elementum. Ut sed quam pretium, faucibus
      nulla id, ultrices mi. Suspendisse eleifend posuere augue a vulputate. Praesent nec nisl nisl. Ut molestie convallis ligula, eget commodo nisi cursus sit amet. Maecenas mollis enim in odio fermentum, ac commodo nibh tincidunt. Aliquam molestie ex
      in nunc ornare faucibus. Pellentesque vel massa condimentum, dictum purus id, congue velit. Cras nec eleifend ipsum, eget lobortis tellus. Pellentesque sed tellus id sem consectetur viverra eget vel magna. Ut pretium ex nec malesuada laoreet. Quisque
      et malesuada eros, non dignissim diam. Integer in semper erat, sit amet hendrerit ipsum. Duis volutpat ac libero non aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean varius laoreet purus
      sit amet porta. Mauris congue, orci quis ultricies ornare, ligula tortor ornare urna, sed fringilla turpis nulla ac sem. Nam nisi odio, consectetur nec nunc in, luctus pretium tellus. Suspendisse in leo elementum, rhoncus risus ut, blandit metus.
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In viverra urna vel turpis hendrerit, sed tincidunt dui fringilla. Proin mattis nisl nec mauris consequat congue. Praesent gravida eget dolor nec fermentum. Proin
      finibus, magna elementum convallis viverra, leo nisi convallis magna, a condimentum nisl sem nec mauris. Sed ultricies lorem eu lectus tristique, sed ornare lorem auctor. Proin tincidunt enim dapibus nunc scelerisque, at consequat quam lobortis.
      Nunc ornare lectus sit amet leo pharetra, at faucibus magna sodales. Cras auctor lacus lorem, ac porta libero feugiat vitae. Mauris metus velit, aliquam sit amet nunc eu, efficitur fermentum dolor. Suspendisse sed sagittis turpis, nec faucibus massa.
      Fusce sagittis massa est, at sagittis est fermentum et. Curabitur egestas arcu eu neque elementum, sit amet sodales nibh viverra. Donec nec placerat nunc. Mauris non orci dapibus, porttitor leo quis, eleifend ante. Vivamus sed risus neque. Pellentesque
      eget laoreet ante. Maecenas sed vehicula purus. Nam at sapien quis tortor vulputate tempor. Cras dignissim, metus sodales facilisis bibendum, dui erat faucibus elit, vel varius nisl lectus sed ante. Pellentesque ut magna consectetur est tempus vestibulum.
      Maecenas fermentum metus nec accumsan volutpat. Mauris in viverra magna. Sed ante erat, blandit id fringilla eget, rhoncus at odio. Curabitur in metus nulla. Aliquam erat volutpat. Cras hendrerit augue massa, ullamcorper eleifend sapien ornare vel.</p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor ipsum eu lacus commodo pulvinar. Donec nec facilisis augue. Nulla in magna iaculis, sagittis dolor vitae, scelerisque risus. Cras fermentum rhoncus nunc, vel gravida sapien tempor at.
      Aliquam rhoncus, metus ac egestas aliquam, augue augue vulputate dolor, id sodales lorem sem quis lectus. Etiam rhoncus neque ligula. Ut ornare nec diam non sodales. Vivamus venenatis congue tellus vitae elementum. Ut sed quam pretium, faucibus
      nulla id, ultrices mi. Suspendisse eleifend posuere augue a vulputate. Praesent nec nisl nisl. Ut molestie convallis ligula, eget commodo nisi cursus sit amet. Maecenas mollis enim in odio fermentum, ac commodo nibh tincidunt. Aliquam molestie ex
      in nunc ornare faucibus. Pellentesque vel massa condimentum, dictum purus id, congue velit. Cras nec eleifend ipsum, eget lobortis tellus. Pellentesque sed tellus id sem consectetur viverra eget vel magna. Ut pretium ex nec malesuada laoreet. Quisque
      et malesuada eros, non dignissim diam. Integer in semper erat, sit amet hendrerit ipsum. Duis volutpat ac libero non aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean varius laoreet purus
      sit amet porta. Mauris congue, orci quis ultricies ornare, ligula tortor ornare urna, sed fringilla turpis nulla ac sem. Nam nisi odio, consectetur nec nunc in, luctus pretium tellus. Suspendisse in leo elementum, rhoncus risus ut, blandit metus.
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In viverra urna vel turpis hendrerit, sed tincidunt dui fringilla. Proin mattis nisl nec mauris consequat congue. Praesent gravida eget dolor nec fermentum. Proin
      finibus, magna elementum convallis viverra, leo nisi convallis magna, a condimentum nisl sem nec mauris. Sed ultricies lorem eu lectus tristique, sed ornare lorem auctor. Proin tincidunt enim dapibus nunc scelerisque, at consequat quam lobortis.
      Nunc ornare lectus sit amet leo pharetra, at faucibus magna sodales. Cras auctor lacus lorem, ac porta libero feugiat vitae. Mauris metus velit, aliquam sit amet nunc eu, efficitur fermentum dolor. Suspendisse sed sagittis turpis, nec faucibus massa.
      Fusce sagittis massa est, at sagittis est fermentum et. Curabitur egestas arcu eu neque elementum, sit amet sodales nibh viverra. Donec nec placerat nunc. Mauris non orci dapibus, porttitor leo quis, eleifend ante. Vivamus sed risus neque. Pellentesque
      eget laoreet ante. Maecenas sed vehicula purus. Nam at sapien quis tortor vulputate tempor. Cras dignissim, metus sodales facilisis bibendum, dui erat faucibus elit, vel varius nisl lectus sed ante. Pellentesque ut magna consectetur est tempus vestibulum.
      Maecenas fermentum metus nec accumsan volutpat. Mauris in viverra magna. Sed ante erat, blandit id fringilla eget, rhoncus at odio. Curabitur in metus nulla. Aliquam erat volutpat. Cras hendrerit augue massa, ullamcorper eleifend sapien ornare vel.</p>
  </div>
</div>

CSS

html, body {
  height: 100%;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.header {
 background:url("http://tympanus.net/Development/ArticleIntroEffects/img/7.jpg") center center no-repeat; 
  background-size:cover;
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform:translateY(0);
  transition:1s cubic-bezier(0.215, 0.61, 0.355, 1) .2s;
  opacity:1;
  &.header--scrolled {
    transform:translateY(-100%);
    opacity:0;
    transition:1s ease-in;
  }

  h1 {
    position: absolute;
    top:50%;
    text-align: center;
    transform:translateY(-50%);
    width: 100%;
  }
}

.subsection {
  transition:.6s ease-out;
  opacity:0;
  transform:translateY(20px);

    &.header--scrolled {
    opacity:1;
    transition:1s cubic-bezier(0.77, 0, 0.175, 1) .6s;
      transform:translateY(0);
      }
}
.subsection--inner {
  max-width:800px;
  padding:0 20px 60px 20px;
  margin: 0 auto;
 }

JQUERY

(function($, sr) {
  var debounce = function(func, threshold, execAsap) {
      var timeout;

      return function debounced() {
        var obj = this,
          args = arguments;

        function delayed() {
          if (!execAsap)
            func.apply(obj, args);
          timeout = null;
        };

        if (timeout)
          clearTimeout(timeout);
        else if (execAsap)
          func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100);
      };
    }
    // smartresize 
  jQuery.fn[sr] = function(fn) {
    return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
  };

})(jQuery, 'smartresize');


function intro() {
  var topT = 0;
  t = setInterval(function(){
    if(topT==0){
      window.scrollTo( 0, 0 );
    }
  },20)
  var wh = window.innerHeight;
  $(".header").css("height", wh);
  $(".subsection").css("padding-top", (wh / 3 * 2));

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll == 0 && topT==0){
      var header = $(".header");
      var subsection = $(".subsection");
      header.addClass("header--scrolled");
      subsection.addClass("header--scrolled");

      header.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
        function(e) {
            topT=1;
        });
    }else if(scroll == 0 && topT==1){
      $(".subsection").removeClass("header--scrolled");
      $(".header").removeClass("header--scrolled");
      topT=0;
    }
  });
};
intro();

$(window).smartresize(function() {
  intro();

});

Answer 2

摆脱开头的障碍

intro div 上的 CSS position 属性需要设置为 fixed

这是我的例子：http://codepen.io/internationalhouseofdonald/pen/aWWNqV

此脚本会在页面加载时阻止用户滚动，然后在 1000 毫秒后启用滚动。

JavaScript

window.addEventListener("load", function() {
        disableScroll();
    });

    setTimeout(function(){ enableScroll() }, 1000);

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36

var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

此设计的唯一缺点是，如果用户抓住滚动条（就像我在 Surface 上用 Surface 触控笔那样），页面仍会滚动。

如何暂时阻止滚动

how to temporarily block scroll

javascript

jquery

scroll

scrolltop

preventdefault

JavaScript