我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
只需在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')
其他回答
我很抱歉回答一个旧帖子,但我正在寻找一个解决方案,遇到了这个问题。
对于这个问题,仍然有许多变通办法来显示滚动条,比如给容器一个100%的高度和一个overflow-y: scroll样式。
在我的情况下,我刚刚创建了一个div与滚动条,我显示,同时添加overflow:隐藏到主体:
function disableScroll() {
document.getElementById('scrollbar').style.display = 'block';
document.body.style.overflow = 'hidden';
}
元素滚动条必须具有以下样式:
overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;
这显示了一个灰色的滚动条,希望它有助于未来的访问者。
不,我不会使用事件处理,因为:
不是所有的事件都能保证到达身体, 选择文本并向下移动实际上是在滚动文档, 如果在分离某事物的阶段出了差错,你就完蛋了。
我已经咬了这个通过制作一个隐藏的文本区域复制粘贴动作,猜什么,页面滚动每当我做复制,因为内部我必须在我调用document.execCommand('copy')之前选择文本区域。
不管怎样,这就是我的方式,注意setTimeout():
document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);
当滚动条暂时消失时,会出现动量闪烁,但这是可以接受的。
对我来说,这并没有带来任何内容跳跃。
禁用滚动:
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%;
}
为了防止跳楼,我用了这个
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;
}
根据你想要使用移除的滚动来实现什么,你可以只修复你想要移除滚动的元素(单击,或任何其他你想要临时禁用滚动的触发器)
我正在寻找一个“临时无滚动”的解决方案,这解决了我的需要
创建一个班级
.fixed{
position: fixed;
}
然后用Jquery
var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from
contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class
//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){
if(contentContainer.hasClass('notfixed')){
contentContainer.removeClass('notfixed').addClass('fixed');
}else if(contentContainer.hasClass('fixed')){
contentContainer.removeClass('fixed').addClass('notfixed');
};
});
我发现这是一个非常简单的解决方案,适用于所有浏览器,也适用于便携式设备(如iphone,平板电脑等)。由于元素是临时固定的,所以没有滚动:)
注意!根据contentContainer元素的位置,你可能需要从左边调整它。这可以很容易地通过添加一个css左值的元素时,固定类是活跃的
contentContainer.css({
'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});