只是禁用滚动不隐藏它？
我正试图禁用父母的HTML /正文滚动条，而我正在使用灯箱。 这里的主要词是禁用 。 我不想用overflow: hidden;来隐藏它overflow: hidden; 。
这是因为overflow: hidden使站点跳跃并占据滚动区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
如果覆盖层下面的页面可以“固定”在顶层，当您打开覆盖层时，您可以设置
body { position: fixed; overflow-y:scroll }
你仍然应该看到正确的滚动条，但内容不可滚动。 closures叠加层时，只需使用以下属性恢复这些属性
body { position: static; overflow-y:auto }
我只是提出这种方式，因为你不需要改变任何滚动事件
更新
你也可以做一些小小的改进：如果你在图层打开之前通过javascript获得document.documentElement.scrollTop属性，你可以dynamic地将这个值指定为body元素的top属性：通过这种方法，页面将会站在原地，不pipe你是顶尖还是已经滚动。
CSS
.noscroll { position: fixed; overflow-y:scroll }
JS
$('body').css('top', -(document.documentElement.scrollTop) + 'px') .addClass('noscroll');
所选解决scheme的四个小补充：
- 将“noscroll”应用于html而不是body来防止IE中的双滚动条
- 在添加“noscroll”类之前检查是否有实际的滚动条 。 否则，该网站也将被新的非滚动滚动条所推动。
- 为了保留任何可能的scrollTop ，整个页面不会回到顶端（比如Fabrizio的更新，但是您需要在添加'noscroll'类之前获取该值）
- 并非所有的浏览器都以http://help.dottoro.com/ljnvjiow.php中logging的相同方式处理scrollTop
似乎适用于大多数浏览器的完整解决scheme：
CSS
html.noscroll { position: fixed; overflow-y: scroll; width: 100%; }
禁用滚动
if ($(document).height() > $(window).height()) { var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE... $('html').addClass('noscroll').css('top',-scrollTop); }
启用滚动
var scrollTop = parseInt($('html').css('top')); $('html').removeClass('noscroll'); $('html,body').scrollTop(-scrollTop);
感谢Fabrizio和Dejan让我走上了正确的轨道，并感谢Brodingo为双滚动条的解决scheme
用jQuery引入：
禁用
$.fn.disableScroll = function() { window.oldScrollPos = $(window).scrollTop(); $(window).on('scroll.scrolldisabler',function ( event ) { $(window).scrollTop( window.oldScrollPos ); event.preventDefault(); }); };
启用
$.fn.enableScroll = function() { $(window).off('scroll.scrolldisabler'); };
用法
//disable $("#selector").disableScroll(); //enable $("#selector").enableScroll();
您不能禁用滚动事件，但可以禁用导致滚动的相关操作，例如mousewheel和touchmove：
$('body').on('mousewheel touchmove', function(e) { e.preventDefault(); });
或者，你可以隐藏身体的滚动条overflow: hidden并同时设置一个保证金，以便内容不跳转：
let marginRightPx = 0; if(window.getComputedStyle) { let bodyStyle = window.getComputedStyle(document.body); if(bodyStyle) { marginRightPx = parseInt(bodyStyle.marginRight, 10); } } let scrollbarWidthPx = window.innerWidth - document.body.clientWidth; Object.assign(document.body.style, { overflow: 'hidden', marginRight: `${marginRightPx + scrollbarWidthPx}px` });
然后你可以添加一个禁用的滚动条到页面来填补空白：
textarea { overflow-y: scroll; overflow-x: hidden; width: 11px; outline: none; resize: none; position: fixed; top: 0; right: 0; bottom: 0; border: 0; }
<textarea></textarea>
这对我来说真的很好….
// disable scrolling $('body').bind('mousewheel touchmove', lockScroll); // enable scrolling $('body').unbind('mousewheel touchmove', lockScroll); // lock window scrolling function lockScroll(e) { e.preventDefault(); }
当你要locking滚动时，只需将这两行代码封装在一起即可。
例如
$('button').on('click', function() { $('body').bind('mousewheel touchmove', lockScroll); });
这是我们的解决scheme。 当覆盖层打开时，只需保存滚动位置，当用户试图滚动页面时，滚动回保存的位置，当覆盖层closures时closures监听程序。
在IE浏览器上有一点点跳动，但在Firefox / Chrome上就像一个魅力。
var body = $("body"), overlay = $("#overlay"), overlayShown = false, overlayScrollListener = null, overlaySavedScrollTop = 0, overlaySavedScrollLeft = 0; function showOverlay() { overlayShown = true; // Show overlay overlay.addClass("overlay-shown"); // Save scroll position overlaySavedScrollTop = body.scrollTop(); overlaySavedScrollLeft = body.scrollLeft(); // Listen for scroll event overlayScrollListener = body.scroll(function() { // Scroll back to saved position body.scrollTop(overlaySavedScrollTop); body.scrollLeft(overlaySavedScrollLeft); }); } function hideOverlay() { overlayShown = false; // Hide overlay overlay.removeClass("overlay-shown"); // Turn scroll listener off if (overlayScrollListener) { overlayScrollListener.off(); overlayScrollListener = null; } } // Click toggles overlay $(window).click(function() { if (!overlayShown) { showOverlay(); } else { hideOverlay(); } });
/* Required */ html, body { margin: 0; padding: 0; height: 100%; background: #fff; } html { overflow: hidden; } body { overflow-y: scroll; } /* Just for looks */ .spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); } .overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; } .overlay .spacer { background: linear-gradient(#88f, #0ff); } .overlay-shown { z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Top of page</h1> <p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p> <div class="spacer"></div> <h1>Bottom of page</h1> <div id="overlay" class="overlay"> <h1>Top of overlay</h1> <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p> <div class="spacer"></div> <h1>Bottom of overlay</h1> </div>
我是OP
在fcalderan的帮助下，我能够形成一个解决scheme。 我在这里留下我的解决scheme，因为它清楚地说明了如何使用它，并增加了一个非常精确的细节， width: 100%;
我添加这个类
body.noscroll { position: fixed; overflow-y: scroll; width: 100%; }
这为我工作，我正在使用Fancyapp。
你可以保持溢出：隐藏，但手动pipe理滚动位置：
在显示实际滚动位置的跟踪之前：
var scroll = [$(document).scrollTop(),$(document).scrollLeft()]; //show your lightbox and then reapply scroll position $(document).scrollTop(scroll[0]).scrollLeft(scroll[1]);
它应该工作
粗糙，但工作的方式将强制滚动回到顶部，从而有效地禁用滚动：
var _stopScroll = false; window.onload = function(event) { document.onscroll = function(ev) { if (_stopScroll) { document.body.scrollTop = "0px"; } } };
当你打开灯箱抬高旗帜和closures时，降低旗帜。
现场testing案例 。
我喜欢坚持“溢出：隐藏”的方法，只是添加填充 – 右侧，这相当于滚动条的宽度。
获取滚动条宽度function，通过lostsource 。
function getScrollbarWidth() { var outer = document.createElement("div"); outer.style.visibility = "hidden"; outer.style.width = "100px"; outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps document.body.appendChild(outer); var widthNoScroll = outer.offsetWidth; // force scrollbars outer.style.overflow = "scroll"; // add innerdiv var inner = document.createElement("div"); inner.style.width = "100%"; outer.appendChild(inner); var widthWithScroll = inner.offsetWidth; // remove divs outer.parentNode.removeChild(outer); return widthNoScroll - widthWithScroll; }
在显示覆盖图时，将“noscroll”类添加到html，并将body-right添加到右边：
$(html).addClass("noscroll"); $(body).css("paddingRight", getScrollbarWidth() + "px");
隐藏时，删除类和填充：
$(html).removeClass("noscroll"); $(body).css("paddingRight", 0);
noscroll风格就是这样：
.noscroll { overflow: hidden; }
请注意，如果您有位置的任何元素：固定您也需要添加填充到这些元素。
<div id="lightbox">位于<body>元素内，因此当您滚动Lightbox时，也会滚动正文。 解决方法是不要将<body>元素扩展超过100％，将长内容放在另一个div元素中，如果需要的话添加一个滚动条给这个带有overflow: auto div元素。
html { height: 100% } body { margin: 0; height: 100% } #content { height: 100%; overflow: auto; } #lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
<html> <body> <div id="content">much content</div> <div id="lightbox">lightbox<div> </body> </html>
我有一个类似的问题：一个左手菜单，当它出现，防止滚动。 一旦高度设置为100vh，滚动条消失，内容向右跳动。
所以，如果你不介意保持滚动条的启用（但是将窗口设置为全高，所以不会实际滚动到任何地方），那么另一种可能性是设置一个很小的底部边距，这将保持滚动条显示：
body { height: 100vh; overflow: hidden; margin: 0 0 1px; }
你可以用Javascript做到这一点：
// Classic JS window.onscroll = function(ev) { ev.preventDefault(); } // jQuery $(window).scroll(function(ev) { ev.preventDefault(); }
然后当你的灯箱closures时禁用它。
但是如果你的灯箱包含一个滚动条，你将无法在打开的时候滚动。 这是因为window包含body和#lightbox 。 所以你必须使用如下的架构：
<body> <div id="global"></div> <div id="lightbox"></div> </body>
然后只在#global上应用onscroll事件。
