我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
为了防止跳楼,我用了这个
export function toggleBodyScroll(disable) {
if (!window.tempScrollTop) {
window.tempScrollTop = window.pageYOffset;
// save the current position in a global variable so I can access again later
}
if (disable) {
document.body.classList.add('disable-scroll');
document.body.style.top = `-${window.tempScrollTop}px`;
} else {
document.body.classList.remove('disable-scroll');
document.body.style.top = `0px`;
window.scrollTo({top: window.tempScrollTop});
window.tempScrollTop = 0;
}
}
在CSS中
.disable-scroll {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
其他回答
这里有一个非常基本的方法:
window.onscroll = function () { window.scrollTo(0, 0); };
在IE6中有点不稳定。
只需在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')
这个答案提出了一个解决方案,用于删除overflow: hidden时发生的“bump”。由于编辑被拒绝,下面是:
要删除overflow: hidden应用时发生的“凹凸”,您可以计算滚动条的宽度并用margin代替它。下面是body元素的例子:
const bodyScrollControls = {
scrollBarWidth: window.innerWidth - document.body.clientWidth,
disable() {
document.body.style.marginRight = `${this.scrollBarWidth}px`;
document.body.style.overflowY = 'hidden';
},
enable() {
document.body.style.marginRight = null;
document.body.style.overflowY = null;
},
};
如果元素已经有右边距,那么获取现有的右边距并为其添加滚动条宽度应该不是问题。
最简单的方法是:
$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily
要撤消它:
$("body").css("overflow", "auto");
很容易实现,但唯一的缺点是:
如果页面是居中对齐的(水平),它会向左跳一点。
这是由于滚动条被移除,并且视口变得更宽。
Galambalazs的解决方案很棒!它在Chrome和Firefox中都非常适合我。它还可以扩展,以防止来自浏览器窗口的任何默认事件。 假设你在画布上做一个应用。你可以这样做:
var events = {
preventDefault: function(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
},
//spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
//left: 37, up: 38, right: 39, down: 40
keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
keydown: function(e) {
for (var i = events.keys.length; i--;) {
if (e.keyCode === events.keys[i]) {
events.preventDefault(e);
return;
}
}
},
wheel: function(e) {
events.preventDefault(e);
},
disable: function() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = events.wheel;
document.onkeydown = helpers.events.keydown;
},
enable: function() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
}
然后在你的应用程序中,假设你要处理你自己的事件,比如鼠标、键盘、触摸事件等等。你可以在鼠标进入画布时禁用默认事件,并在鼠标离开时重新启用它们:
function setMouseEvents(canvas) {
var useCapture = false;
//Mouse enter event
canvas.addEventListener('mouseenter', function(event) {
events.disable();
}, useCapture);
//Mouse leave event
canvas.addEventListener('mouseleave', function(event) {
events.enable();
}, useCapture);
}
你甚至可以禁用右键菜单与此hack:
function disableRightClickMenu(canvas) {
var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "white");
my_gradient.addColorStop(1, "white");
canvas.context.fillStyle = my_gradient;
canvas.context.fillRect(0, 0, canvas.width, canvas.height);
canvas.oncontextmenu = function() { return false; };
}