隐藏滚动条，但仍可以滚动

我希望能够滚动整个页面，但不显示滚动条。

在Google Chrome中，它是：

::-webkit-scrollbar {
    display: none;
}

但Mozilla Firefox和Internet Explorer似乎不是这样工作的。

我也在CSS中尝试过：

overflow: hidden;

这确实隐藏了滚动条，但我不能再滚动了。

有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？

请只使用CSS或HTML。

当前回答

这是一个类似于divitis的解决方案，所有浏览器都可以使用它。。。

标记如下所示，需要位于具有相对定位的内部（其宽度应设置为400像素）：

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS：

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

2016-11-12 21:34:08

其他回答

另一种黑客方法是执行overflow-y:hidden，然后手动滚动元素，如下所示：

function detectMouseWheelDirection(e) {
  var delta = null, direction = false;
  if (!e) { // If the event is not provided, we get it from the window object
    e = window.event;
  }
  if (e.wheelDelta) { // Will work in most cases
    delta = e.wheelDelta / 60;
  } else if (e.detail) { // Fallback for Firefox
    delta = -e.detail / 2;
  }
  if (delta !== null) {
    direction = delta > 0 ? -200 : 200;
  }
  return direction;
}

if (element.addEventListener) {
  element.addEventListener('DOMMouseScroll', function(e) {
    element.scrollBy({
      top: detectMouseWheelDirection(e),
      left: 0,
      behavior: 'smooth'
    });
  });
}

deepmikoto的博客中有一篇关于如何检测和处理onmousewheel事件的精彩文章。这可能对你有用，但绝对不是一个优雅的解决方案。

2018-05-02 22:46:36

这对我有用：

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

2019-04-15 10:28:25

我加了这个，它对我有用

-ms溢出样式：无；/*IE和Edge*/滚动条宽度：无；/*Firefox浏览器*/

裁判：https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

2022-07-08 07:05:40

我碰巧在我的项目中尝试了上述解决方案，由于某些原因，由于div定位，我无法隐藏滚动条。因此，我决定通过引入一个表面覆盖滚动条的div来隐藏滚动条。下面的示例适用于水平滚动条：

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

对应的CSS如下：

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

2018-01-15 09:03:50

Use:

CSS

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

2015-04-18 17:46:55

隐藏滚动条，但仍可以滚动

推荐文章

最新文章

标签