我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
下面是停止滚动的解决方案(不使用jQuery)。我用它来禁用滚动时,侧菜单出现。
<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button> <script> var noscroll_var; function noscroll(){ if(noscroll_var){ document.getElementsByTagName("html")[0].style.overflowY = ""; document.body.style.paddingRight = "0"; noscroll_var = false }else{ document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important'); document.body.style.paddingRight = "17px"; noscroll_var = true } }/*noscroll()*/ </script> <!-- Just to fill the page --> <script> for(var i=0; i <= 80; i++){ document.write(i + "<hr>") } </script>
我用17px的右填充来补偿滚动条的消失。但这也是有问题的,尤其是对于移动浏览器。通过得到条宽来解决。
全都在这圈里。
其他回答
这里有一个非常基本的方法:
window.onscroll = function () { window.scrollTo(0, 0); };
在IE6中有点不稳定。
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;
}
我对这个问题的看法还包括对主体宽度的关注,因为当我们用overflow = "hidden"隐藏滚动条时,页面似乎会跳舞。 下面的代码非常适合我,并且是基于Angular的方法。
element.bind('mouseenter', function() {
var w = document.body.offsetWidth;
document.body.style.overflow = 'hidden';
document.body.style.width = w + 'px';
});
element.bind('mouseleave', function() {
document.body.style.overflow = 'initial';
document.body.style.width = 'auto';
});
这是目前为止我得到的最简单的解。相信我,其他的我都试过了,这是最简单的。它在Windows设备上工作得很好,它将页面从右边推到为系统滚动条留出空间,而IOS设备在浏览器中不需要滚动条的空间。所以通过使用这个,你不需要在右边添加填充,所以当你隐藏溢出的正文或html与css页面不会闪烁。
如果你仔细想想,解决方法其实很简单。其思想是在弹出窗口被打开时赋予window.scrollTop()相同的确切位置。当窗口调整大小时也要改变这个位置(因为一旦发生这种情况,滚动位置就会改变)。
所以我们开始…
首先,让我们创建一个变量,让你知道弹出窗口是打开的,并将其称为stopWindowScroll。如果我们不这样做,那么你会在你的页面上得到一个未定义变量的错误,并将其设置为0 -不活跃。
$(document).ready(function(){
stopWindowScroll = 0;
});
现在让我们创建一个打开的弹出函数witch可以是你代码中的任何函数,它可以触发你作为插件或自定义使用的任何弹出。在这种情况下,它将是一个简单的自定义弹出窗口,带有一个简单的文档点击功能。
$(document).on('click','.open-popup', function(){
// Saving the scroll position once opening the popup.
stopWindowScrollPosition = $(window).scrollTop();
// Setting the stopWindowScroll to 1 to know the popup is open.
stopWindowScroll = 1;
// Displaying your popup.
$('.your-popup').fadeIn(300);
});
接下来我们要做的就是创建close popup函数,我再重复一遍,这个函数可以是你已经创建的或者在插件中使用的任何函数。重要的是,我们需要这两个函数来设置stopWindowScroll变量为1或0,以知道它何时打开或关闭。
$(document).on('click','.open-popup', function(){
// Setting the stopWindowScroll to 0 to know the popup is closed.
stopWindowScroll = 0;
// Hiding your popup
$('.your-popup').fadeOut(300);
});
然后让我们创建窗口。scroll函数,这样我们可以防止滚动一旦上面提到的stopWindowScroll设置为1 -作为活动。
$(window).scroll(function(){
if(stopWindowScroll == 1) {
// Giving the window scrollTop() function the position on which
// the popup was opened, this way it will stay in its place.
$(window).scrollTop(stopWindowScrollPosition);
}
});
这是它。除了您自己的页面样式外,不需要CSS来完成此工作。这对我来说很有吸引力,我希望它能帮助到你和其他人。
下面是JSFiddle的一个工作示例:
JS小提琴示例
如果有帮助,请告诉我。的问候。
另一个解决方案:
body {
overflow-y: scroll;
width: 100%;
margin: 0 auto;
}
这样你总是有一个垂直的滚动条,但由于我的大部分内容都比视口长,这对我来说是可以的。内容是中心与一个单独的div,但没有设置边缘再次在身体我的内容将留在左边。
这是我用来显示弹出式/模态的两个函数:
var popup_bodyTop = 0;
var popup_bodyLeft = 0;
function popupShow(id)
{
$('#'+ id).effect('fade');
$('#popup-overlay').effect('fade');
// remember current scroll-position
// because when setting/unsetting position: fixed to body
// the body would scroll to 0,0
popup_bodyLeft = $(document).scrollLeft();
popup_bodyTop = $(document).scrollTop();
// invert position
var x = - popup_bodyLeft;
var y = - popup_bodyTop;
$('body').css('position', 'fixed');
$('body').css('top', y.toString() +'px');
$('body').css('left', x.toString() +'px');
}
function popupHide(id)
{
$('#'+ id).effect('fade');
$('#popup-overlay').effect('fade');
$('body').css('position', '');
$('html, body').scrollTop(popup_bodyTop);
$('html, body').scrollLeft(popup_bodyLeft);
}
结果:不可滚动的背景和没有重新定位的内容,因为左边的滚动条。测试与当前的FF, Chrome和IE 10。