我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
这是目前为止我得到的最简单的解。相信我,其他的我都试过了,这是最简单的。它在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小提琴示例
如果有帮助,请告诉我。的问候。
其他回答
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;
}
我使用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();
});
下面的解决方案是基本的纯JavaScript(没有jQuery):
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){window.scrollTo(x, y);};
}
function enableScrolling(){
window.onscroll=function(){};
}
无法取消滚动事件。但是你可以通过取消这些交互事件来实现: 鼠标和触摸滚动和与滚动相关的按钮。
(工作演示)
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e.preventDefault();
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function () { supportsPassive = true; }
}));
} catch(e) {}
var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
// call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}
// call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener('touchmove', preventDefault, wheelOpt);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
更新:固定Chrome桌面和现代移动浏览器被动监听器
你可以这样做:
这样你就节省了“无关紧要”的内存,Position: fixed中的元素没有移动,因此不会影响你的设计本身。
CSS(使用CSS使您的生活和记忆更容易)
html[DisableScroll] {
overflow-y: scroll;
}
html[DisableScroll] body {
overflow-y: hidden;
height: 100vh;
}
JS
var enableScroll = function () {
document.documentElement
.removeAttribute('DisableScroll');
}
e.g
//When you want to enable escroll just call this function; var enableScroll = function () { document.documentElement .removeAttribute('DisableScroll'); } setTimeout(() => { enableScroll(); }, 2000); *{ margin: 0px; padding: 0px } body{ height: 4000px; background: #141417 } html[DisableScroll] { overflow-y: scroll } html[DisableScroll] body { overflow-y: hidden; height: 100vh; } body>p{ color: #FBFBFD } div{ position: fixed; left: 0; right: 0; margin: auto; width: 270px; background: #FBFBFD; color: #141417; text-align: center } <!DOCTYPE html> <html lang="en" DisableScroll> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> </div> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> </body> </html>