我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
你可以这样做:
这样你就节省了“无关紧要”的内存,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>
其他回答
这里有一个非常基本的方法:
window.onscroll = function () { window.scrollTo(0, 0); };
在IE6中有点不稳定。
我在移动屏幕上有类似的动画问题,但在笔记本电脑上没有,当尝试使用jquery的animate命令动画一个div时。所以我决定使用一个计时器来频繁地恢复窗口的滚动位置,这样肉眼就能看到文档是静态的。这一解决方案在三星Galaxy-2或iphone-5等小屏幕移动设备上运行良好。
该方法的主要逻辑:设置窗口滚动位置到原始滚动位置的定时器应该在jquery animate命令之前启动,然后当动画完成时,我们需要清除这个定时器(原始滚动位置是动画开始之前的位置)。
我惊喜地发现,如果计时器间隔为1毫秒,文档在动画持续时间内实际上是静态的,这正是我的目标。
//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
window.scrollTo(xPosition, yPosition);
}, 1);
//animate the element emt
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//when animation completes, we stop the timer
clearInterval(restoreTimer);
});
另一个有效的解决方案:根据Mohammad Anini在这篇文章中关于启用/禁用滚动的回答,我还发现修改后的代码版本如下所示有效。
//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//disable scrolling
window.onscroll = function() {
window.scrollTo(xPosition, yPosition);
};
//animate and enable scrolling when animation is completed
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//enable scrolling when animation is done
window.onscroll = function() {};
});
我一直在寻找这个问题的解决方案,但对上面的任何解决方案都不满意(在写这个答案时),所以我想出了这个解决方案。
CSS
.scrollDisabled {
position: fixed;
margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
width: 100%;
}
JS
var y_offsetWhenScrollDisabled=0;
function disableScrollOnBody(){
y_offsetWhenScrollDisabled= $(window).scrollTop();
$('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
$('body').removeClass('scrollDisabled').css('margin-top', 0);
$(window).scrollTop(y_offsetWhenScrollDisabled);
}
在全局变量中存储滚动长度,并在需要时恢复它!
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);
}
我在这里用了一个简单的技巧:
.no-scroll{
overflow: hidden;
}
let toggle_scrolling_state = () => {
element.classList.toggle("no-scroll");
}
然后当你想要停止滚动事件或…