我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
下面的解决方案是基本的纯JavaScript(没有jQuery):
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){window.scrollTo(x, y);};
}
function enableScrolling(){
window.onscroll=function(){};
}
其他回答
你可以这样做:
这样你就节省了“无关紧要”的内存,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>
我找到了一个更好,但有问题的方法,结合了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%的把握它能在主流浏览器上运行。
对我来说,这并没有带来任何内容跳跃。
禁用滚动:
this.htmlBody = $('body')
this.scrollPos = document.documentElement.scrollTop
this.htmlBody.css('top', -this.scrollPos + 'px').addClass('disable-scroll')
重新启用滚动:
this.htmlBody.removeClass('disable-scroll')
$(window).scrollTop(this.scrollPos)
而CSS:
body.disable-scroll {
position: fixed;
width: 100%;
}
我在另一个网站上找到了答案:
禁用滚动:
$( ".popup").live({
popupbeforeposition: function(event, ui) {
$("body").on("touchmove", false);
}
});
关闭后弹出窗口释放滚动:
$( ".popup" ).live({
popupafterclose: function(event, ui) {
$("body").unbind("touchmove");
}
});
还有另一个解决方案!
而不是使用多个事件监听器和添加,停止和关闭它们,你可以只添加一次回调监听器,其中你可以在你的函数中共享事件,只在需要的时候调用preventDefault等等,甚至实现自己的事件优先级系统。