我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
我一直在寻找这个问题的解决方案,但对上面的任何解决方案都不满意(在写这个答案时),所以我想出了这个解决方案。
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);
}
其他回答
这个怎么样?(如果你正在使用jQuery)
var $window = $(window);
var $body = $(window.document.body);
window.onscroll = function() {
var overlay = $body.children(".ui-widget-overlay").first();
// Check if the overlay is visible and restore the previous scroll state
if (overlay.is(":visible")) {
var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
window.scrollTo(scrollPos.x, scrollPos.y);
}
else {
// Just store the scroll state
$body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
}
};
这里有一个非常基本的方法:
window.onscroll = function () { window.scrollTo(0, 0); };
在IE6中有点不稳定。
这段代码将工作在Chrome 56和进一步(原来的答案不再工作在Chrome上)。
使用DomUtils.enableScroll()来启用滚动。
使用DomUtils.disableScroll()禁用滚动。
class DomUtils {
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
static preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
static preventDefaultForScrollKeys(e) {
if (DomUtils.keys[e.keyCode]) {
DomUtils.preventDefault(e);
return false;
}
}
static disableScroll() {
document.addEventListener('wheel', DomUtils.preventDefault, {
passive: false,
}); // Disable scrolling in Chrome
document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
passive: false,
});
}
static enableScroll() {
document.removeEventListener('wheel', DomUtils.preventDefault, {
passive: false,
}); // Enable scrolling in Chrome
document.removeEventListener(
'keydown',
DomUtils.preventDefaultForScrollKeys,
{
passive: false,
}
); // Enable scrolling in Chrome
}
}
我在另一个网站上找到了答案:
禁用滚动:
$( ".popup").live({
popupbeforeposition: function(event, ui) {
$("body").on("touchmove", false);
}
});
关闭后弹出窗口释放滚动:
$( ".popup" ).live({
popupafterclose: function(event, ui) {
$("body").unbind("touchmove");
}
});
我在这里用了一个简单的技巧:
.no-scroll{
overflow: hidden;
}
let toggle_scrolling_state = () => {
element.classList.toggle("no-scroll");
}
然后当你想要停止滚动事件或…