如何暫時阻止滾動

Question

我試圖重現以下效果：http://tympanus.net/Development/ArticleIntroEffects/和我走到這一步：http://codepen.io/vlrprbttst/pen/LGMVyj

演示的，唯一的區別是滾動管理。在我的例子中，如果你滾動得太多，你會發現自己在頁面中滾動得太遠。這是我想要阻止的事情。在這個例子中，看起來滾動是暫時被阻止的，並且一旦消失標題的動畫完成就可以重新渲染。

我想這：

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檢查是否頂部和沒有滾動頁面的計時器。

請嘗試：

CodePen：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

入門之初

的CSS需要被設置爲fixed

這裏就intro DIV position屬性擺脫了順利的是我的例子：http://codepen.io/internationalhouseofdonald/pen/aWWNqV

該腳本停止用戶在頁面加載時滾動，然後在1000毫秒後啓用滾動econds。

的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; 
} 

唯一的缺點這種設計是，如果用戶抓取滾動條（像我想我與我的面筆表面），該網頁將仍然滾動。