我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)

当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。


当前回答

我找到了一个更好,但有问题的方法,结合了sdleihssirhc的想法:

window.onscroll = function() {
    window.scrollTo(window.scrollX, window.scrollY);
    //Or
    //window.scroll(window.scrollX, window.scrollY);
    //Or Fallback
    //window.scrollX=window.scrollX;
    //window.scrollY=window.scrollY;
};

我没有测试它,但我稍后会编辑,让你们都知道。我有85%的把握它能在主流浏览器上运行。

其他回答

这里有一个非常基本的方法:

window.onscroll = function () { window.scrollTo(0, 0); };

在IE6中有点不稳定。

我刚刚整理的一些东西:

斯菲德尔

document.onwheel = function(e) { // get the target element target = e.target; // the target element might be the children of the scrollable element // e.g., "li"s inside an "ul", "p"s inside a "div" etc. // we need to get the parent element and check if it is scrollable // if the parent isn't scrollable, we move up to the next parent while (target.scrollHeight <= target.clientHeight) { // while looping parents, we'll eventually reach document.body // since body doesn't have a parent, we need to exit the while loop if (target == document.body) { break; } target = target.parentElement; } // we want this behaviour on elements other than the body if (target != document.body) { // if the scrollbar is at the top and yet if it still tries to scroll up // we prevent the scrolling if (target.scrollTop <= 0 && e.deltaY < 0) { e.preventDefault(); } // similarly, if the scrollbar is at the bottom and it still tries to scroll down // we prevent it else if (target.clientHeight + target.scrollTop >= target.scrollHeight && e.deltaY > 0) { e.preventDefault(); } } }; body { background: gainsboro; } #box { width: 300px; height: 600px; padding: 5px; border: 1px solid silver; margin: 50px auto; background: white; overflow: auto; } <div id="box"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>

你可以这样做:

这样你就节省了“无关紧要”的内存,Position: fixed中的元素没有移动,因此不会影响你的设计本身。

CSS(使用CSS使您的生活和记忆更容易)

html[DisableScroll] {
    overflow-y: scroll;
}

html[DisableScroll] body {
    overflow-y: hidden;
    height: 100vh;
}

JS

var enableScroll = function () {
   document.documentElement
     .removeAttribute('DisableScroll');
}

e.g

//When you want to enable escroll just call this function; var enableScroll = function () { document.documentElement .removeAttribute('DisableScroll'); } setTimeout(() => { enableScroll(); }, 2000); *{ margin: 0px; padding: 0px } body{ height: 4000px; background: #141417 } html[DisableScroll] { overflow-y: scroll } html[DisableScroll] body { overflow-y: hidden; height: 100vh; } body>p{ color: #FBFBFD } div{ position: fixed; left: 0; right: 0; margin: auto; width: 270px; background: #FBFBFD; color: #141417; text-align: center } <!DOCTYPE html> <html lang="en" DisableScroll> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> </div> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> </body> </html>

在全局变量中存储滚动长度,并在需要时恢复它!

var sctollTop_length = 0;

function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}

function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}

CSS

  overflow-y: hidden
}

Javascript
``let body = document.querySelector('body');
if(condition)  {
 //disable scroll on the entire body
 body?.classList.add("disable-scroll");
} 
else {
 //to remove the class attrib
 body?.removeAttribute("class");
 //or to remove the disable-scroll class only
 body?.classList.remove("dissble-scroll");
}

这比长代码好多了。容易理解