我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
在我看来,取消事件是一个可怕的方法:/
相反,我使用position: fixed;上图:-scrollTop ();在下面。
演示:https://jsfiddle.net/w9w9hthy/5/
从我的jQuery弹出项目:https://github.com/seahorsepip/jPopup
//Freeze page content scrolling
function freeze() {
if($("html").css("position") != "fixed") {
var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
if(window.innerWidth > $("html").width()) {
$("html").css("overflow-y", "scroll");
}
$("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
}
}
//Unfreeze page content scrolling
function unfreeze() {
if($("html").css("position") == "fixed") {
$("html").css("position", "static");
$("html, body").scrollTop(-parseInt($("html").css("top")));
$("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
}
}
这段代码考虑了宽度、高度、滚动条和页面跳转问题。
上述代码可能解决的问题:
宽度,当设置位置固定的HTML元素宽度可以小于100% 高度,同上 滚动条,当设置位置固定时,页面内容不再有滚动条,即使它在水平页面跳转之前有滚动条 页面跳转,当设置位置固定时,页面滚动顶部不再有效,导致垂直页面跳转
如果任何人对上面的页面冻结/解冻代码有任何改进,请告诉我,这样我就可以将这些改进添加到我的项目中。
其他回答
使用Javascript函数切换overflowY,同时切换移动菜单的可见性。比如这个:
function handleClickMobileMenu() {
document.body.style.overflowY = isMobileMenuOpen ? "hidden" : "scroll";
//...
}
在打开和关闭移动菜单时调用该函数。 最好的用例是当你的移动菜单是完全视口区域。
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; };
}
我很抱歉回答一个旧帖子,但我正在寻找一个解决方案,遇到了这个问题。
对于这个问题,仍然有许多变通办法来显示滚动条,比如给容器一个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;
这显示了一个灰色的滚动条,希望它有助于未来的访问者。
我也有同样的问题,下面是我处理它的方法。
/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");
/* file.css */
.no-scroll{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
希望这对你有所帮助。
我使用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();
});