如何禁用滚动而不隐藏它?

我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。

这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。

我想知道是否有可能禁用滚动条，同时仍然显示它。

当前回答

所有基于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>

2018-11-01 10:13:30

其他回答

这对我来说真的很好....

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

只需用决定何时锁定滚动的任何东西来包装这两行代码。

e.g.

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

2017-08-17 14:49:17

在公认的解决方案基础上增加了四个小补充:

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);

感谢法布里齐奥和德扬把我带到了正确的轨道上，感谢布罗丁戈解决了双滚动条的问题

2012-12-15 11:21:57

粗糙但有效的方法是强制滚动回顶部，从而有效地禁用滚动:

var _stopScroll = false;
window.onload = function(event) {
    document.onscroll = function(ev) {
        if (_stopScroll) {
            document.body.scrollTop = "0px";
        }
    }
};

打开灯箱时升起旗子，关闭灯箱时降下旗子。

现场测试用例。

2012-01-02 14:26:21

这里是一个工作演示。这是你如何用纯JavaScript做到这一点:

const { body, documentElement } = document;
let { scrollTop } = document.documentElement;

function disableScroll() {
  scrollTop = documentElement.scrollTop;
  body.style.top = `-${scrollTop}px`;
  body.classList.add("scroll-disabled");
}

function enableScroll() {
  body.classList.remove("scroll-disabled");
  documentElement.scrollTop = scrollTop;
  body.style.removeProperty("top");
}

这是CSS:

.scroll-disabled {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

我们使用position: fixed on body来防止它可滚动，我们使用overflow-y来显示滚动条。我们还需要设置宽度，因为position: fixed是如何工作的。

我们跟踪滚动位置，并在禁用滚动时更新它，以便在禁用滚动时使用top适当地定位主体，并在启用滚动时恢复滚动位置。否则，当禁用或启用滚动时，身体将继续跳到顶部。

当启用滚动时，我们从主体中删除顶部样式。这可以防止它打破你的布局，如果你有一个不同的位置，而不是静态的主体。

如果你在html上使用scroll-behavior: smooth，你还需要像这样修改enableScroll函数:

function enableScroll() {
  body.classList.remove("scroll-disabled");
  // Set "scroll-behavior" to "auto"
  documentElement.style.scrollBehavior = "auto";
  documentElement.scrollTop = scrollTop;
  // Remove "scroll-behavior: auto" after restoring scroll position
  documentElement.style.removeProperty("scroll-behavior");
  body.style.removeProperty("top");
}

我们需要临时将滚动行为设置为自动，这样就不会出现跳转。

2021-11-21 19:31:45