隐藏滚动条，但仍然可以滚动答案

【问题标题】：Hide scroll bar, but while still being able to scroll隐藏滚动条，但仍然可以滚动
【发布时间】：2013-05-16 06:35:56
【问题描述】：

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

在谷歌浏览器中是：

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

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

我也在 CSS 中试过这个：

overflow: hidden;

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

有没有一种方法可以在移除滚动条的同时还能滚动整个页面？

请只使用 CSS 或 HTML。

【问题讨论】：

webkit-scrollbar 不能在其他浏览器上使用吗？

标签： html css google-chrome internet-explorer firefox

【解决方案1】：

在 globalCSS 文件中使用它来从每个网页中删除滚动条

.scrollbar-thumb{
    display: none;
  }

【讨论】：

【解决方案2】：

.your-overflow-scroll-class::-webkit-scrollbar {
  ...
  width: 0.5rem; //only hide the vertical scrollbar
  height: 0px; //only hide the horizontal scrollbar
}

【讨论】：

【解决方案3】：

我知道这是一个很老的问题，但这里有一个很酷的跨浏览器解决方案，只使用 HTML 和 CSS。

HTML：

  <div class="barrel">
    <div class="clipper">
        <p class="clippercontent">Lorem</p>
    </div>
    <div id='navcontainer'>
      <p class="navcontent" >I want to be able to scroll through the whole page, but without the scrollbar being shown. Is there a way I can remove the scrollbar while still being able to scroll the whole page? With just CSS or HTML, please.
     </p>
    </div>
  </div>

原则：#navcontainer 将容纳我们的 .navcontent，并带有滚动条。 .barrel 将隐藏#navcontainer 的滚动条。

CSS：

.barrel{
  border: 0.8px solid #110011;
  position: relative;
  overflow: hidden;
}
.barrel #navcontainer{
  overflow: scroll; overflow-y: hidden;
  position: absolute;/* absolute positioned contents will not affect their parents */
  top: 0; left: 0; right: 0;
  white-space: nowrap;
}
/* style .clipper and .clippercontent, as a structural-image of #navcontainer and .navcontent respectively This will help .barrel have the same height as the #navcontainer */
.barrel .clipper{
  overflow: hidden;
  width: 0px;
  white-space: nowrap;
}
.navcontent, .clippercontent{
  padding: 3px 1px;
}

【讨论】：

嗨！我作为一个年轻的新手开发者提出的这个问题，人们仍然在回答这个问题是多么的酷。
总是很高兴找到改进的解决方案。 :)

【解决方案4】：

只要写下这段代码：

::-webkit-scrollbar {
  width: 0px;
}

或

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

【讨论】：

【解决方案5】：

此外，所有浏览器都支持无滚动条滚动。

CSS

.keep-scrolling {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll y axis*/
}

/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

SCSS

.keep-scrolling {
      background-color: #eee;
      width: 200px;
      height: 100px;
      border: 1px dotted black;
      overflow-y: scroll; /* Add the ability to scroll y axis*/

     /* Hide scrollbar for IE, Edge and Firefox */
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */

      /* Hide scrollbar for Chrome, Safari and Opera */
      &::-webkit-scrollbar {
        display: none;
      }
    }

HTML

<div class="keep-scrolling">
</div>

【讨论】：

scss 版本中缺少 &：&::-webkit-scrollbar { display: none; }

【解决方案6】：

在 WebKit 中很容易，带有可选的样式：

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

【讨论】：

在cordova 应用程序中试过这个，效果很好。必须将overflow:scroll 应用于元素。
不适用于 Firefox，很明显，因为这纯粹是在说明 webkit。谢谢:)
在 Electron 应用程序中表现出色，因为它们是铬的。 +1 谢谢：D
从iOS8开始，与-webkit-overflow-scrolling: touch一起使用时这个功能不起作用
它适用于 chrome。但不适用于 Mozilla firefox。

【解决方案7】：

  scrollbar-width: none;

为我工作

【讨论】：

【解决方案8】：

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

你写的一切都是正确的，除了“溢出”。适用于 Chrome 和其他浏览器的 webkit

overflow-y: scroll;

或

overflow-y: auto;

对于 Firefox 和 Edge

scrollbar-width: none;

或

scrollbar-width: thin;

【讨论】：

【解决方案9】：

使用它来隐藏滚动条但保留功能：

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

隐藏 IE、Edge 和 Firefox 的滚动条

.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

【讨论】：

这是 IMO 的最佳答案。这是我发现如何隐藏滚动条同时保持提到的每个浏览器的功能的来源。 w3schools.com/howto/howto_css_hide_scrollbars.asp

【解决方案10】：

这个棘手的解决方案甚至适用于旧的 IE 网络浏览器

这是[垂直滚动条]

的一种解决方法

<html>

<head>
  <style>
    html,
    body {
      overflow: -moz-scrollbars-vertical;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
  <!--your stuff here-->
</body>

</html>

试试吧：jsfiddle

【讨论】：

【解决方案11】：

使用溢出的元素隐藏滚动条。

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}

【讨论】：

除了你提到的 FF 之外，几乎不存在支持，对于 OP 的要求来说太少了。检查caniuse.com/#feat=mdn-css_properties_scrollbar-width
@Adrien 好吧，原始问题表明他们有其他浏览器的解决方案。（但 Mozilla Firefox 和 Internet Explorer 似乎不能那样工作）他说，这就是我提供 Firefox 解决方案的原因。
我发现与等效项结合使用时效果很好： div::-webkit-scrollbar { display: none; } 用于 Webkit / Chrome。

【解决方案12】：

以下SASS 样式应该使您的滚动条在大多数浏览器上都是透明的（不支持Firefox）：

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

【讨论】：

【解决方案13】：

这适用于我的跨浏览器。但是，这不会隐藏移动浏览器上的原生滚动条。

在SCSS

中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

在CSS

中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

【讨论】：

嵌套块 ({}) 是什么意思？该如何解读？还有&?也许在你的答案中详细说明？
这是一个 SASS 的事情（显然，LESS 也是）：css-tricks.com/the-sass-ampersand
@PeterMortensen 我现在才看到你的评论，&::-webkit-scrollbar 在 CSS 中变成了.hide-native-scrollbar::-webkit-scrollbar { }
对 ::-webkit-scrollbar 使用 { width: 0; height: 0;} 而不是对 iOS 使用 display: none。
在 FF71 中这会阻止所有滚动。

【解决方案14】：

这对我来说适用于简单的 CSS 属性：

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

对于旧版本的 Firefox，请使用：overflow: -moz-scrollbars-none;

【讨论】：

对我来说，overflow: -moz-scrollbars-none 在 Firebox 中隐藏了滚动条，但也禁用了滚动。你能提供一个适合你的演示吗？
很遗憾，最新 Firefox 版本的 -moz-scrollbars-none 属性已被删除：developer.mozilla.org/en-US/docs/Web/CSS/overflow
从iOS8开始，与-webkit-overflow-scrolling: touch一起使用时这个功能不起作用
对于过时的 Firefox -moz-scrollbars-none，您可以使用 @-moz-document url-prefix() { .container { overflow: hidden; } }。见stackoverflow.com/questions/952861/…。
我已经更新了我对 Firefox 的最新支持 :)

【解决方案15】：

您可以使用下面的代码隐藏滚动条，但仍然可以滚动：

.element::-webkit-scrollbar { 
    width: 0 !important 
}

【讨论】：

【解决方案16】：

隐藏水平和垂直滚动条。

See Fiddle here

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

【讨论】：

【解决方案17】：

这对我有用：

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

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

【讨论】：

【解决方案18】：

以下内容适用于我在 Microsoft、Chrome 和 Mozilla 上针对特定 div 元素：

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

【讨论】：

请注意，scrollbar-width（仅限 FF）被标记为“实验性”
是的@cimak，但是在 FF 上你可以隐藏它没有任何问题，所以它真的只用于 Chrome。

【解决方案19】：

我只是想分享一个组合的 sn-p 来隐藏我在开发时使用的滚动条。它是在 Internet 上找到的几个适合我的 sn-ps 的集合：

.container {
    overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */

    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}


.container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

【讨论】：

【解决方案20】：

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

box-sizing 值影响填充或边距解决方案，它们与 box-sizing:content-box 一起使用。

我仍然需要“-moz-scrollbars-none”指令，并且像 gdoron 和 Mr_Green 一样，我不得不隐藏滚动条。我试过-moz-transform 和-moz-padding-start，只影响Firefox，但有响应式副作用需要做太多工作。

此解决方案适用于具有“显示：网格”样式的 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;
}

【讨论】：

【解决方案21】：

另一种 hacky 方法是执行 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's 博客中有一篇关于如何检测和处理onmousewheel 事件的精彩文章。这可能对您有用，但绝对不是一个优雅的解决方案。

【讨论】：

【解决方案22】：

更新：

Firefox 现在支持使用 CSS 隐藏滚动条，因此现在涵盖了所有主流浏览器（Chrome、Firefox、Internet Explorer、Safari 等）。

只需将以下 CSS 应用于要从中删除滚动条的元素：

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

这是我目前知道的最简单的跨浏览器解决方案。 Check out the demo.

原始答案：

这是另一种尚未提及的方式。它非常简单，只涉及两个 div 和 CSS。不需要 JavaScript 或专有 CSS，它适用于所有浏览器。它也不需要显式设置容器的宽度，从而使其具有流动性。

此方法使用负边距将滚动条移出父级，然后使用相同数量的填充将内容推回其原始位置。该技术适用于垂直、水平和双向滚动。

演示：

竖版示例代码：

HTML：

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS：

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

【讨论】：

scrollbar-width: none 在 Firefox 91 中不起作用

【解决方案23】：

在现代浏览器上，您可以使用wheel event：

// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
    const step = 100; // How many pixels to scroll

    if (e.deltaY > 0) // Scroll down
        content.scrollTop += step;
    else // Scroll up
        content.scrollTop -= step;
});

【讨论】：

这是我一直在寻找的答案。谢谢。我使用overflow: hidden 和这段代码，使mat-card-content（当然是角5）可以滚动，这些解决了我的问题。注意：我使用e.deltaY 作为我的step，它就像正常滚动一样，所以我认为正常滚动但隐藏滚动条，这是最好的匹配。
此处链接的页面警告说这种方法不合适？

【解决方案24】：

这是我为水平滚动做的；只有 CSS 并且适用于 Bootstrap / col-* 等框架。它只需要两个额外的divs 和带有width 或max-width 集的父级：

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

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
    overflow-x: hidden;
    margin-bottom: -17px;
    overflow-y: hidden;
    width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 17px;
    white-space: nowrap;
    cursor: pointer
}

/* The following classes are only here to make the example looks nicer */
.row {
    width: 100%
}
.col-xs-4 {
    width: 33%;
    float: left
}
.col-xs-3 {
    width:25%;
    float:left
}
.bg-gray {
    background-color: #DDDDDD
}
.bg-orange {
    background-color:#FF9966
}
.bg-blue {
    background-color: #6699FF
}
.bg-orange-light{
    background-color: #FFAA88
}
.bg-blue-light{
    background-color: #88AAFF
}

<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

懒人的短版：

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
  overflow-x: hidden;
  margin-bottom: -17px;
  overflow-y: hidden;
  width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 17px;
  white-space: nowrap;
  cursor:pointer
}

/* The following classes are only here to make the example looks nicer */
.parent-style {
    width: 100px;
    background-color: #FF9966
}

<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

【讨论】：

谢谢，我试过了，效果很好。一件事是最好将margin-bottom 更改为padding-bottom 但具有相同的值。这不会占用底部元素的空间。它可以防止重叠。
@haxpor margin-bottom 是负数，我认为不能改成padding-bottom，不能处理负值

【解决方案25】：

这是一个 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;
}

【讨论】：

【解决方案26】：

如果出于某种原因您想使用box-model: border-box，则在当前接受的答案中向内部div 添加填充将不起作用。

在这两种情况下都起作用的是将内部 div 的宽度增加到 100% 加上滚动条的宽度（假设外部 div 上的 overflow: hidden）。

例如，在 CSS 中：

.container2 {
    width: calc(100% + 19px);
}

在 JavaScript 中，跨浏览器：

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

【讨论】：

【解决方案27】：

只需将孩子的宽度设置为 100%，填充为 15 像素，overflow-x 用于滚动，overflow:hidden 用于父项以及您想要的任何宽度。

它在所有主流浏览器上都能完美运行，包括 Internet Explorer 和 Edge，但 Internet Explorer 8 及更低版本除外。

【讨论】：

【解决方案28】：

用途：

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>

【讨论】：

不知道为什么这被否决了，但我只是赞成它，因为它确实朝着正确的方向发展，其他解决方案在我的情况下并不能很好地工作。溢出-x：隐藏； +溢出-y：滚动；诀窍是什么，以及 >100% 的宽度（在我的情况下 110% 效果很好）。
这与最受好评的解决方案相同：试图隐藏滚动条。这并不理想，因为它因浏览器而异

【解决方案29】：

只是一个运行良好的测试。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript：

由于不同浏览器的滚动条宽度不同，最好用JavaScript来处理。如果您执行Element.offsetWidth - Element.clientWidth，则会显示确切的滚动条宽度。

JavaScript Working Fiddle

或者

使用Position: absolute，

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

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

信息：

基于这个答案，我创建了一个simple scroll plugin。

【讨论】：

在你最后的“工作小提琴”中，我看到了太多!important，所以我把它们都删除了：jsfiddle.net/5GCsJ/954
这种方法不会涵盖所有浏览器，并且会非常具体到您在开发过程中使用的浏览器版本。
为什么要复杂计算滚动条宽度？只需设置box-sizing: border-box; width: calc(100% + 50px); 和相同的填充值。没有浏览器有 50px 的滚动条宽度/高度，所以它应该简单地覆盖它们......

【解决方案30】：

HTML：

<div class="parent">
    <div class="child">
    </div>
</div>

CSS：

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

相应地应用 CSS。

查看here （在 Internet Explorer 和 Firefox 中测试）。

【讨论】：