我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
我在移动屏幕上有类似的动画问题,但在笔记本电脑上没有,当尝试使用jquery的animate命令动画一个div时。所以我决定使用一个计时器来频繁地恢复窗口的滚动位置,这样肉眼就能看到文档是静态的。这一解决方案在三星Galaxy-2或iphone-5等小屏幕移动设备上运行良好。
该方法的主要逻辑:设置窗口滚动位置到原始滚动位置的定时器应该在jquery animate命令之前启动,然后当动画完成时,我们需要清除这个定时器(原始滚动位置是动画开始之前的位置)。
我惊喜地发现,如果计时器间隔为1毫秒,文档在动画持续时间内实际上是静态的,这正是我的目标。
//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
window.scrollTo(xPosition, yPosition);
}, 1);
//animate the element emt
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//when animation completes, we stop the timer
clearInterval(restoreTimer);
});
另一个有效的解决方案:根据Mohammad Anini在这篇文章中关于启用/禁用滚动的回答,我还发现修改后的代码版本如下所示有效。
//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//disable scrolling
window.onscroll = function() {
window.scrollTo(xPosition, yPosition);
};
//animate and enable scrolling when animation is completed
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//enable scrolling when animation is done
window.onscroll = function() {};
});
其他回答
这是目前为止我得到的最简单的解。相信我,其他的我都试过了,这是最简单的。它在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小提琴示例
如果有帮助,请告诉我。的问候。
这个怎么样?(如果你正在使用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() });
}
};
基于Cheyenne Forbes的回答,以及我在这里通过fcalderan找到的答案:只是禁用滚动而不是隐藏它? 并修复了Hallodom的滚动条消失的问题
CSS:
.preventscroll{
position: fixed;
overflow-y:scroll;
}
JS:
whatever.onclick = function(){
$('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
$('body').removeClass('preventscroll');
}
这段代码确实会跳到页面的顶部,但我认为fcalderan的代码有一个解决方案。
最简单的方法是:
$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily
要撤消它:
$("body").css("overflow", "auto");
很容易实现,但唯一的缺点是:
如果页面是居中对齐的(水平),它会向左跳一点。
这是由于滚动条被移除,并且视口变得更宽。
我使用showModalDialog,显示二级页面为模态对话框。
隐藏主窗口滚动条:
document.body.style.overflow = "hidden";
关闭模态对话框时,显示主窗口滚动条:
document.body.style.overflow = "scroll";
从对话框中访问主窗口中的元素:
parent.document.getElementById('dialog-close').click();
仅供任何搜索showModalDialog的人使用:(在原始代码第29行之后)
document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
e.preventDefault();
document.body.style.overflow = "scroll";//****
dialog.close();
});