我正在使用scrollTo jQuery插件，想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是，当你滚动而scrollTo是动画，它变得非常难看;)
当然，我可以做$("body").css("overflow"， "hidden");然后当动画停止时把它放回自动，但如果滚动条仍然可见但不活跃会更好。
当前回答
这段代码将工作在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
}
}
其他回答
var winX = null;
var winY = null;
window.addEventListener('scroll', function () {
if (winX !== null && winY !== null) {
window.scrollTo(winX, winY);
}
});
function disableWindowScroll() {
winX = window.scrollX;
winY = window.scrollY;
}
function enableWindowScroll() {
winX = null;
winY = null;
}
只需在body中添加一个类即可:
.stop-scrolling {
height: 100%;
overflow: hidden;
}
添加类，然后删除当你想重新启用滚动，测试在IE, FF, Safari和Chrome。
$('body').addClass('stop-scrolling')
对于移动设备，你需要处理touchmove事件:
$('body').bind('touchmove', function(e){e.preventDefault()})
并取消绑定以重新启用滚动。在iOS6和Android 2.3.3测试
$('body').unbind('touchmove')
我在这篇文章中找到了解决方案。在我的上下文中，我希望禁用垂直滚动，当我在一个
像这样=>
let scrollContainer = document.getElementById('scroll-container');
document.getElementById('scroll-container').addEventListener(
"wheel",
(event) => {
event.preventDefault();
scrollContainer.scrollLeft += event.deltaY;
},
{
// allow preventDefault()
passive: false
}
);
还有另一个解决方案!
而不是使用多个事件监听器和添加，停止和关闭它们，你可以只添加一次回调监听器，其中你可以在你的函数中共享事件，只在需要的时候调用preventDefault等等，甚至实现自己的事件优先级系统。
您可以阻止空格条滚动和隐藏浏览器滚动条:
$(document).keydown(function(event) {
if (event.keyCode == 32) {
return false;
}
});
document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';
