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

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

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

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

当前回答

如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置

body { 
  position: fixed; 
  overflow-y:scroll 
}

您应该仍然可以看到右边的滚动条，但是内容是不可滚动的。当你关闭覆盖时，只需恢复这些属性

body { 
  position: static;
  overflow-y:auto 
}

我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件

如果我已经滚动了页面呢?

如果你在层打开之前通过javascript获得document.documentElement.scrollTop属性，你可以动态地将该值赋给body元素的top属性:通过这种方法，页面将保持当前的滚动位置，无论你是在顶部还是已经滚动了。

Css

.noscroll {
  position: fixed; 
  inline-size: 100%;
  overflow-y:scroll 
}

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

2012-01-02 14:26:59

其他回答

如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置

.disableScroll { position: fixed; overflow-y:scroll }

将这个类提供给可滚动的主体，您仍然应该看到正确的滚动条，但内容是不可滚动的。

用jquery来保持页面的位置

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

当你关闭覆盖时，只需恢复这些属性

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件

2018-11-14 07:21:09

如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置

body { 
  position: fixed; 
  overflow-y:scroll 
}

您应该仍然可以看到右边的滚动条，但是内容是不可滚动的。当你关闭覆盖时，只需恢复这些属性

body { 
  position: static;
  overflow-y:auto 
}

我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件

如果我已经滚动了页面呢?

Css

.noscroll {
  position: fixed; 
  inline-size: 100%;
  overflow-y:scroll 
}

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

2012-01-02 14:26:59

我已经做了这个函数，用JS解决了这个问题。这个原则可以很容易地扩展和定制，这对我来说是一个很大的优势。

使用这个js DOM API函数:

const handleWheelScroll = (element) => (event) => {
  if (!element) {
    throw Error("Element for scroll was not found");
  }
  const { deltaY } = event;
  const { clientHeight, scrollTop, scrollHeight } = element;
  if (deltaY < 0) {
    if (-deltaY > scrollTop) {
      element.scrollBy({
        top: -scrollTop,
        behavior: "smooth",
      });
      event.stopPropagation();
      event.preventDefault();
    }
    return;
  }

  if (deltaY > scrollHeight - clientHeight - scrollTop) {
    element.scrollBy({
      top: scrollHeight - clientHeight - scrollTop,
      behavior: "smooth",
    });
    event.stopPropagation();
    event.preventDefault();
    return;
  }
};

简而言之，如果滚动要滚动给定元素(您想要滚动的元素)之后的其他内容，则此函数将停止事件传播和默认行为。

然后你可以像这样把它勾起来和解开:

const wheelEventHandler = handleWheelScroll(elementToScrollIn);

window.addEventListener("wheel", wheelEventHandler, {
    passive: false,
});

window.removeEventListener("wheel", wheelEventHandler);

注意，它是一个高阶函数，所以必须保持对给定实例的引用。

我在鼠标进入中挂钩addEventListener部分，在鼠标离开事件中取消挂钩removeEventListener，但你可以随心所欲地使用它。

2020-10-05 15:31:21

这是我们的解。简单地保存覆盖打开时的滚动位置，在用户试图滚动页面时滚动回保存的位置，并在覆盖关闭时关闭侦听器。

它在IE上有点不稳定，但在Firefox/Chrome上却很有魅力。

2014-09-26 21:02:44

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

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

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

现场测试用例。

2012-01-02 14:26:21

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

推荐文章

最新文章

标签