我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
当前回答
这是我们的解。简单地保存覆盖打开时的滚动位置，在用户试图滚动页面时滚动回保存的位置，并在覆盖关闭时关闭侦听器。
它在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>
其他回答
在公认的解决方案基础上增加了四个小补充:
Apply 'noscroll' to html instead of to body to prevent double scroll bars in IE To check if there's actually a scroll bar before adding the 'noscroll' class. Otherwise, the site will also jump pushed by the new non-scrolling scroll bar. To keep any possible scrollTop so the entire page doesn't go back to the top (like Fabrizio's update, but you need to grab the value before adding the 'noscroll' class) Not all browsers handle scrollTop the same way as documented at http://help.dottoro.com/ljnvjiow.php
完整的解决方案，似乎适用于大多数浏览器:
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);
感谢法布里齐奥和德扬把我带到了正确的轨道上，感谢布罗丁戈解决了双滚动条的问题
你可以用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:滚动; overflow-x:隐藏; 宽度:11 px; 大纲:没有; 调整:没有; 位置:固定; 上图:0; 右:0; 底部:0; 边界:0; ｝ textarea > < textarea > < /
我在我自己的灯箱实现中就是这样做的。目前看来还不错。
所有基于javascript的modal/lightbox系统在html标签或body标签上显示modal/lightbox时都会使用溢出。
当lightbox显示时，js会推送一个隐藏在html或body标签上的溢出。 当lightbox被隐藏时，有些人会删除隐藏的，有些人会在html或body标签上推一个溢出自动。
在Mac上工作的开发人员没有看到滚动条的问题。
只需替换隐藏的unset不看到内容滑动下的模式删除滚动条。
Lightbox开放/显示:
<html style="overflow: unset;"></html>
Lightbox隐藏/关闭:
<html style="overflow: auto;"></html>
包含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();
<div id="lightbox">在<body>元素中，因此当你滚动lightbox时，你也会滚动body。解决方案是不要将<body>元素扩展到100%以上，将长内容放在另一个div元素中，并在需要时使用overflow: auto为这个div元素添加滚动条。
html { 高度:100% ｝ 身体{ 保证金:0; 高度:100% ｝ #内容{ 高度:100%; 溢出:汽车; ｝ # lightbox { 位置:固定; 上图:0; 左:0; 右:0; 底部:0; ｝ < html > 身体< > <div id="content">much content</div> . < div id = " lightbox " > lightbox < div > 身体< / > < / html >
现在，滚动灯箱(以及主体)没有效果，因为主体不超过屏幕高度的100%。
