我正在使用 scrollTo jQuery 插件，想知道是否可以通过 Javascript 暂时禁用窗口元素的滚动？我想禁用滚动的原因是，当您在 scrollTo 动画时滚动时，它会变得非常丑陋；）
当然，我可以做一个$("body").css("overflow", "hidden");，然后在动画停止时将其恢复为自动，但如果滚动条仍然可见但不活动会更好。
【问题讨论】：
标签： javascript jquery scroll
这是一个非常基本的方法：
window.onscroll = function () { window.scrollTo(0, 0); };
在 IE6 中有点跳动。
【讨论】：
(0, 0)，只需使用当前滚动位置即可。
scroll 事件无法取消。但是您可以通过取消这些交互事件来做到这一点：
鼠标 & 触摸滚动和与滚动相关的按钮。
// 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 桌面和现代移动浏览器
【讨论】：
很抱歉回答一个旧帖子，但我正在寻找解决方案并遇到了这个问题。
对于这个问题有很多解决方法来仍然显示滚动条，比如给容器一个 100% 的高度和一个 overflow-y: scroll 样式。
在我的例子中，我刚刚创建了一个带有滚动条的 div，我在将 overflow: hidden 添加到正文时显示它：
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;
这显示了一个灰色的滚动条，希望对以后的访问者有所帮助。
【讨论】：
结合 sdleihssirhc 的想法，我找到了一个更好但有问题的方法：
window.onscroll = function() {
window.scrollTo(window.scrollX, window.scrollY);
//Or
//window.scroll(window.scrollX, window.scrollY);
//Or Fallback
//window.scrollX=window.scrollX;
//window.scrollY=window.scrollY;
};
我没有测试它，但我稍后会编辑并让大家知道。我 85% 确定它适用于主流浏览器。
【讨论】：
只需在正文中添加一个类即可：
.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')
【讨论】：
$('body').bind('touchmove', function(e){e.preventDefault()}) 一样处理touchmove 事件。编辑此答案以包含此移动解决方案。
$('body,html')
这个怎么样？ （如果你使用 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() });
}
};
【讨论】：
我在另一个 site 上找到了这个答案：
禁用滚动：
$( ".popup").live({
popupbeforeposition: function(event, ui) {
$("body").on("touchmove", false);
}
});
关闭弹窗后释放滚动：
$( ".popup" ).live({
popupafterclose: function(event, ui) {
$("body").unbind("touchmove");
}
});
【讨论】：
根据您希望使用已移除的滚动条实现的目标，您可以只修复要从中移除滚动条的元素（在点击时，或您想要暂时停用滚动条的任何其他触发器）
我一直在寻找“临时无滚动”解决方案，根据我的需要，这解决了它
开课
.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 left 值来轻松完成
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)
});
【讨论】：
根据 galambalazs 帖子，我将添加对触摸设备的支持，允许我们触摸但不能向上或向下滚动：
function disable_scroll() {
...
document.ontouchmove = function(e){
e.preventDefault();
}
}
function enable_scroll() {
...
document.ontouchmove = function(e){
return true;
}
}
【讨论】：
另一种解决方案：
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 测试。
【讨论】：
此解决方案将在禁用滚动时保持当前滚动位置，这与将用户跳回顶部的某些解决方案不同。
它基于galambalazs' answer，但支持触摸设备，并使用 jquery 插件包装器重构为单个对象。
/**
* $.disablescroll
* Author: Josh Harrison - aloof.co
*
* Disables scroll events from mousewheels, touchmoves and keypresses.
* Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
*/
;(function($) {
"use strict";
var instance, proto;
function UserScrollDisabler($container, options) {
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
// left: 37, up: 38, right: 39, down: 40
this.opts = $.extend({
handleKeys : true,
scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
}, options);
this.$container = $container;
this.$document = $(document);
this.lockToScrollPos = [0, 0];
this.disable();
}
proto = UserScrollDisabler.prototype;
proto.disable = function() {
var t = this;
t.lockToScrollPos = [
t.$container.scrollLeft(),
t.$container.scrollTop()
];
t.$container.on(
"mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
t._handleWheel
);
t.$container.on("scroll.disablescroll", function() {
t._handleScrollbar.call(t);
});
if(t.opts.handleKeys) {
t.$document.on("keydown.disablescroll", function(event) {
t._handleKeydown.call(t, event);
});
}
};
proto.undo = function() {
var t = this;
t.$container.off(".disablescroll");
if(t.opts.handleKeys) {
t.$document.off(".disablescroll");
}
};
proto._handleWheel = function(event) {
event.preventDefault();
};
proto._handleScrollbar = function() {
this.$container.scrollLeft(this.lockToScrollPos[0]);
this.$container.scrollTop(this.lockToScrollPos[1]);
};
proto._handleKeydown = function(event) {
for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
if (event.keyCode === this.opts.scrollEventKeys[i]) {
event.preventDefault();
return;
}
}
};
// Plugin wrapper for object
$.fn.disablescroll = function(method) {
// If calling for the first time, instantiate the object and save
// reference. The plugin can therefore only be instantiated once per
// page. You can pass options object in through the method parameter.
if( ! instance && (typeof method === "object" || ! method)) {
instance = new UserScrollDisabler(this, method);
}
// Instance already created, and a method is being explicitly called,
// e.g. .disablescroll('undo');
else if(instance && instance[method]) {
instance[method].call(instance);
}
};
// Global access
window.UserScrollDisabler = UserScrollDisabler;
})(jQuery);
【讨论】：
mousewheel很有魅力
您可以阻止空格键滚动并隐藏浏览器滚动条：
$(document).keydown(function(event) {
if (event.keyCode == 32) {
return false;
}
});
document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';
【讨论】：
我知道这是一个老问题，但我不得不做一些非常相似的事情，经过一段时间寻找答案并尝试不同的方法后，我最终使用了一个非常简单的解决方案。
我的问题非常相似，几乎相同，唯一的区别是我不必实际显示滚动条 - 我只需要确保它的宽度仍然可以使用，所以页面的宽度不会改变，而我覆盖显示。
当我开始将叠加层滑入屏幕时，我会这样做：
$('body').addClass('stop-scrolling').css('margin-right', 8);
在我将叠加层滑出屏幕后，我会这样做：
$('body').removeClass('stop-scrolling').css('margin-right', 0);
重要提示：这非常有效，因为当visible 时，我的叠加层位于absolute、right: 0px。
【讨论】：
以下解决方案是基本但纯 JavaScript（无 jQuery）：
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){window.scrollTo(x, y);};
}
function enableScrolling(){
window.onscroll=function(){};
}
【讨论】：
window.onscroll=null而不是添加一个空的匿名函数，null是window.onload的初始值
我一直在寻找这个问题的解决方案，但对上述任何解决方案都不满意（在撰写此答案时），所以我想出了这个解决方案..
CSS
.scrollDisabled {
position: fixed;
margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
width: 100%;
}
JS
var y_offsetWhenScrollDisabled=0;
function disableScrollOnBody(){
y_offsetWhenScrollDisabled= $(window).scrollTop();
$('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
$('body').removeClass('scrollDisabled').css('margin-top', 0);
$(window).scrollTop(y_offsetWhenScrollDisabled);
}
【讨论】：
overflow-y: scroll 添加到 .scrollDisabled 样式中，我发现这对我有用。否则，每次滚动条隐藏时都会有一点跳跃。当然，这只对我有用，因为我的页面足够长，即使在最大的显示器上也需要滚动条。
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; };
}
【讨论】：
使用 JavaScript 启用以下 CSS 会有所帮助。我不如这里的其他人，但这对我有用。
body {
position: fixed;
overflow-y: scroll;
}
【讨论】：
在尝试使用 jquery 的 animate 命令为 div 设置动画时，我在移动屏幕上遇到了类似的动画问题，但在笔记本电脑上没有。所以我决定使用一个计时器来频繁地恢复窗口的滚动位置，以至于在肉眼看来文档看起来是静止的。该解决方案在三星 Galaxy-2 或 iphone-5 等小屏幕移动设备上运行良好。
此方法的主要逻辑：设置窗口滚动位置到原始滚动位置的计时器应该在jquery animate命令之前启动，然后当动画完成时我们需要清除这个计时器（@ 987654321@ 是动画开始前的位置）。
令我惊喜的是，如果计时器间隔为 1 millisecond，则该文档实际上在动画期间显示为静态，这正是我的目标。
//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() {};
});
【讨论】：
我对这个问题的看法还包括对正文宽度的关注，因为当我们用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';
});
【讨论】：
一个对我有用的简单解决方案（暂时禁用窗口滚动）。
基于这个小提琴：http://jsfiddle.net/dh834zgw/1/
以下 sn-p (使用 jquery) 将禁用窗口滚动：
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');
在你的 CSS 中：
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}
现在当你移除modal时，别忘了移除html标签上的noscroll类：
$('html').toggleClass('noscroll');
【讨论】：
我使用 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();
});
【讨论】：
在我看来，取消已接受答案中的事件是一种可怕的方法：/
我在下面使用了position: fixed; top: -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": ""});
}
}
此代码考虑了宽度、高度、滚动条和页面跳转问题。
以上代码解决的可能问题：
如果有人对上述页面冻结/解冻代码有任何改进，请告诉我，以便我可以将这些改进添加到我的项目中。
【讨论】：
我刚刚整理的一些东西：
document.onwheel = function(e) {
// get the target element
target = e.target;
// the target element might be the children of the scrollable element
// e.g., "li"s inside an "ul", "p"s inside a "div" etc.
// we need to get the parent element and check if it is scrollable
// if the parent isn't scrollable, we move up to the next parent
while (target.scrollHeight <= target.clientHeight) {
// while looping parents, we'll eventually reach document.body
// since body doesn't have a parent, we need to exit the while loop
if (target == document.body) {
break;
}
target = target.parentElement;
}
// we want this behaviour on elements other than the body
if (target != document.body) {
// if the scrollbar is at the top and yet if it still tries to scroll up
// we prevent the scrolling
if (target.scrollTop <= 0 && e.deltaY < 0) {
e.preventDefault();
}
// similarly, if the scrollbar is at the bottom and it still tries to scroll down
// we prevent it
else if (target.clientHeight + target.scrollTop >= target.scrollHeight && e.deltaY > 0) {
e.preventDefault();
}
}
};body {
background: gainsboro;
}
#box {
width: 300px;
height: 600px;
padding: 5px;
border: 1px solid silver;
margin: 50px auto;
background: white;
overflow: auto;
}<div id="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>【讨论】：
基于夏安福布斯的回答，以及我通过 fcalderan 在这里找到的回答：Just disable scroll not hide it? 并修复 Hallodom 的滚动条消失问题
CSS：
.preventscroll{
position: fixed;
overflow-y:scroll;
}
JS：
whatever.onclick = function(){
$('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
$('body').removeClass('preventscroll');
}
此代码确实会将您跳转到页面顶部，但我认为 fcalderan 的代码有一个解决方法。
【讨论】：
从 Chrome 56 和其他现代浏览器开始，您必须将 passive:false 添加到 addEventListener 调用才能使 preventDefault 工作。所以我用它来停止在移动设备上滚动：
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}
【讨论】：
我也有同样的问题，下面是我的处理方式。
/* 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;
}
希望对您有所帮助。
【讨论】：
最简单的方法是：
$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily
要撤消它：
$("body").css("overflow", "auto");
易于实施，但唯一的缺点是：
这是由于滚动条被移除，并且视口变宽了一些。
【讨论】：
body 改为html。
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 的 padding-right 来补偿滚动条的消失。但这也是有问题的，主要是针对移动浏览器。根据this获取条宽即可解决。
【讨论】：
我在触控设备上遇到了类似的问题。向元素添加“touch-action: none”解决了这个问题。
了解更多信息。看看这个：-
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
【讨论】：
这是迄今为止我得到的最简单的解决方案。相信我，我尝试了所有其他方法，这是最简单的。它在Windows 设备 上运行良好，从右侧推动页面为系统滚动条和 IOS 设备留出空间，这些设备在浏览器中的滚动条不需要空间.因此，通过使用它，您不需要在右侧添加填充，这样当您使用 css 隐藏 body 或 html 的溢出时页面不会闪烁。
如果您考虑一下，解决方案非常简单。这个想法是在打开弹出窗口的那一刻给 window.scrollTop() 相同的确切位置。当窗口调整大小时也改变那个位置（一旦发生滚动位置就会改变）。
所以我们开始...
首先让我们创建一个变量，让您知道弹出窗口已打开，并将其命名为 stopWindowScroll。如果我们不这样做，您将在您的页面上收到未定义变量的错误并将其设置为 0 - 未激活。
$(document).ready(function(){
stopWindowScroll = 0;
});
现在让打开的弹出函数可以是代码中的任何函数，它可以触发您作为插件或自定义使用的任何弹出窗口。在这种情况下，它将是一个简单的自定义弹出窗口，带有一个简单的文档点击功能。
$(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);
});
接下来我们要做的是创建关闭弹出功能，我再次重复一遍，它可以是您已经创建或正在插件中使用的任何功能。重要的是我们需要这 2 个函数将 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);
});
然后让我们创建 window.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 的工作示例：
如果这有帮助，请告诉我。问候。
【讨论】：