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

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

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

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

当前回答

我已经做了这个函数，用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

其他回答

<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%。

2015-10-04 16:28:06

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

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

2014-09-26 21:02:44

我也遇到过类似的问题:左侧菜单出现时，无法滚动。一旦高度设置为100vh，滚动条就会消失，内容会向右抽搐。

因此，如果你不介意保持滚动条启用(但设置窗口全高，这样它实际上不会滚动到任何地方)，那么另一种可能性是设置一个小的底部边距，这将保持滚动条显示:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

2016-09-30 20:19:07

包含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();

2015-08-12 20:12:11

你可以用Javascript来做:

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

然后当你的灯箱关闭时禁用它。

但如果你的灯箱包含滚动条，你将无法在它打开时滚动。这是因为window包含了body和#lightbox。所以你必须使用像下面这样的架构:

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

然后只在#global上应用onscroll事件。

2012-01-02 14:20:07

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

推荐文章

最新文章

标签