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

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

在Google Chrome中，它是：

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

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

我也在CSS中尝试过：

overflow: hidden;

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

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

请只使用CSS或HTML。

当前回答

我的问题是：我不想在HTML内容中使用任何样式。我希望我的身体可以直接滚动，没有任何滚动条，只有一个垂直滚动，可以使用CSS网格来适应任何屏幕大小。

框大小调整值影响填充或边距解决方案，它们与框大小调整一起工作：内容框。

我仍然需要“-moz scrollbars none”指令，像gdoron和Mr_Green一样，我必须隐藏滚动条。我尝试了-moz转换和-moz填充启动，只影响Firefox，但有一些响应性的副作用需要做太多的工作。

此解决方案适用于具有“display:grid”样式的HTML正文内容，并且具有响应性。

/* Hide HTML and body scroll bar in CSS grid context */
html, body {
  position: static; /* Or relative or fixed ... */
  box-sizing: content-box; /* Important for hidding scrollbar */
  display: grid; /* For CSS grid */

  /* Full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

html {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  background: transparent;
  visibility: hidden;
  width: 0px;
}

/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make HTML with overflow hidden */
  html {
    overflow: hidden;
  }

  /* Make body max height auto */
  /* Set right scroll bar out the screen  */
  body {
    /* Enable scrolling content */
    max-height: auto;

    /* 100vw +15px: trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);

    /* Set back the content inside the screen */
    padding-right: 15px;
  }
}

body {
  /* Allow vertical scroll */
  overflow-y: scroll;
}

2018-06-21 17:51:26

其他回答

隐藏水平和垂直滚动条。

请在此处查看Fiddle

HTML

 <div id="container1">
    <div id="container2">
    <pre>

Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
    </pre>

    </div>
    <div>

CSS

* {
    margin: 0;
}
#container1 {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#container2 {
    position: absolute;
    top: 0px;
    bottom: -15px;
    left: 0px;
    right: -15px;
    overflow: auto;
}

2019-07-21 12:03:41

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

除了“溢出”之外，你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit

overflow-y: scroll;

overflow-y: auto;

对于Firefox和Edge

scrollbar-width: none;

scrollbar-width: thin;

2020-12-10 20:14:35

这是我如何做水平滚动；只有CSS，并且可以很好地与Bootstrap/col-*等框架配合使用。它只需要两个额外的div和设置了width或max width的父级：

如果您有触摸屏，您可以选择文本使其滚动或用手指滚动。

.overflow-x-scroll-no滚动条{溢出：隐藏；}.overflow-x-scroll-no-scrollbar div{overflow-x：隐藏；边距底部：-17px；overflow-y：隐藏；宽度：100%；}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动；宽度：100%；填充底部：17px；空白：nowrap；光标：指针}/*下面的类只是为了使示例看起来更好*/.行{宽度：100%}.col-xs-4列{宽度：33%；浮动：左侧}.col-xs-3列{宽度：25%；浮动：左侧}.bg灰色{背景色：#DDDDD}.bg橙色{背景色：#FF9966}.bg蓝色{背景色：#6699FF}.bg橙色灯{背景色：#FFAA88}.bg蓝光{背景色：#88AAFF}<html><body><div class=“row”><div class=“col-xs-4 bg orange”>第1列</div>第2列</div><div class=“col-xs-4 bg blue”>第3列</div></div><div class=“row”><div class=“col-xs-4 bg橙色灯光”>内容1</div><div class=“col-xs-3溢出-x-scroll-no-scrollbar”>＜div＞＜div＞这个内容对于容器来说太长了，所以它需要隐藏，但不需要滚动条就可以滚动</div></div><div class=“col-xs-4 bg蓝光”>内容3</div></div></body></html>

懒人版：

.overflow-x-scroll-no滚动条{溢出：隐藏；}.overflow-x-scroll-no-scrollbar div{overflow-x：隐藏；边距底部：-17px；overflow-y：隐藏；宽度：100%；}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动；宽度：100%；填充底部：17px；空白：nowrap；光标：指针}/*下面的类只是为了使示例看起来更好*/.父样式{宽度：100px；背景色：#FF9966}<div class=“父样式溢出-x-scroll-no-scrollbar”>＜div＞＜div＞这个内容对于容器来说太长了，所以它需要隐藏，但不需要滚动条就可以滚动</div></div>

2016-12-07 15:18:17

另一种黑客方法是执行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

这对我有用

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

2022-04-28 17:02:07

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

推荐文章

最新文章

标签