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

Question

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

在谷歌浏览器中它是：

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

但是 Mozilla Firefox 和 Inte.net Explorer 似乎不是那样工作的。

我也在 CSS 中尝试过这个：

overflow: hidden;

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

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

请拨打 CSS 或 HTML。

Answer 1

只是一个工作正常的测试。

#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 */
}

工作小提琴

JavaScript：

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

JavaScript 工作小提琴

或者

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

工作小提琴

JavaScript 工作小提琴

信息：

基于这个答案，我创建了一个简单的滚动插件。

Answer 2

这适用于我的简单 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;

Answer 3

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

Answer 4

更新：

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

这是我目前知道的最简单的跨浏览器解决方案。 查看演示。

---

原始答案：

这是另一种尚未提及的方式。 它非常简单，只涉及两个 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;
}

Answer 5

利用：

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

这是将滚动条与没有任何滚动条的重叠 div 在某种程度上重叠的技巧：

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

这仅适用于WebKit浏览器......或者您可以使用特定于浏览器的 CSS 内容（如果将来有的话）。 每个浏览器都可以为其各自的栏具有不同的特定属性。

对于 Microsoft Edge 使用： -ms-overflow-style: -ms-autohiding-scrollbar; 或-ms-overflow-style: none; 根据 MSDN 。

Firefox 没有等价物。 虽然有一个 jQuery 插件来实现这一点，http: //manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Answer 6

此外，适用于所有浏览器的无滚动条滚动。

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>

Answer 7

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

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

隐藏 IE、Edge 和 Firefox 的滚动条

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

Answer 8

只需使用以下三行即可解决您的问题：

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

其中 liaddshapes 是滚动即将到来的 div 的名称。

Answer 9

这个答案不包括代码，所以这里是page的解决方案：

根据页面，这种方法不需要提前知道滚动条的宽度即可工作，并且该解决方案也适用于所有浏览器，可以在这里看到。

好消息是您不必被迫使用填充或宽度差异来隐藏滚动条。

这也是变焦安全的。 填充/宽度解决方案在缩放到最小时显示滚动条。

Firefox 修复：http: //jsbin.com/mugiqoveko/1/edit ?output

 .element, .outer-container { width: 200px; height: 200px; } .outer-container { border: 5px solid purple; position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; padding-right: 150px; } .inner-container::-webkit-scrollbar { display: none; }

 <div class="outer-container"> <div class="inner-container"> <div class="element"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. </div> </div> </div>

Answer 10

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

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

Answer 11

只需编写以下代码：

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

或者

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

Answer 12

scrollbar-width: none; 

为我工作。

Answer 13

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

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

Answer 14

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

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

overflow-y: scroll;

或者

overflow-y: auto;

对于 Firefox 和 Edge

scrollbar-width: none;

或者

scrollbar-width: thin;

Answer 15

截至 2018 年 12 月 11 日（Firefox 64 及更高版本），这个问题的答案确实非常简单，因为 Firefox 64+ 现在实现了CSS 滚动条样式规范。

只需使用以下 CSS：

scrollbar-width: none;

Firefox 64 发行说明链接在这里。

Answer 16

要隐藏内容溢出的元素的滚动条，请使用。

.div{

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

}    

Answer 17

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。

在这里检查（在 Internet Explorer 和 Firefox 中测试）。

Answer 18

这对我有用

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 */
}

Answer 19

利用：

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>

Answer 20

在现代浏览器上，您可以使用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;
});

Answer 21

利用

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

为您想要加载或卸载或重新加载滚动条的任何点调用这些函数。 当我在 Chrome 中测试它时，它仍然可以在 Chrome 中滚动，但我不确定其他浏览器。

Answer 22

这对我有用：

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

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

Answer 23

这就是我为水平滚动做的方式； 只有 CSS 并且适用于 Bootstrap / col-* 等框架。 它只需要两个额外的div和具有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>

Answer 24

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

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

Answer 25

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

Answer 26

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

Answer 27

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

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

例如，在 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 + ')';

Answer 28

这将在正文中：

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

这是CSS：

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}

Answer 29

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

Answer 30

perfect-scrollbar插件似乎是解决之道，请参见： https : //github.com/noraesae/perfect-scrollbar

它是针对滚动条问题的详尽记录且基于JavaScript的完整解决方案。

演示页面： http : //noraesae.github.io/perfect-scrollbar/

Answer 31

我碰巧在我的项目中尝试了上述解决方案，但由于 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*/
}

Answer 32

我只是想分享一个组合片段来隐藏我在开发时使用的滚动条。 它是在 Internet 上找到的对我有用的几个片段的集合：

.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 */
}

Answer 33

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

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

Answer 34

另一个简单的工作小提琴：

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

父容器上隐藏溢出，子容器上自动溢出。 简单的。

Answer 35

另一种 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'
    });
  });
}

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

Answer 36

隐藏水平和垂直滚动条。

在这里看小提琴

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

Answer 37

这个棘手的解决方案甚至适用于旧的 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

Answer 38

我知道这是一个非常古老的问题，但这是一个很酷的跨浏览器解决方案，只使用 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;
}

Answer 39

这个帖子已经有很多人回答了，但我觉得它的解决方案可以简单得多。

/* Hide scrollbar for Chrome, Safari and Opera */

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

/* Hide scrollbar for Internet Explorer, Edge and Firefox */

.container {
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */
}

}

注意：上述方法只会删除滚动条的可见性，但它仍然有效。 如果你想删除滚动功能，那么你可以使用下面的：

container {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

Answer 40

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

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

Answer 41

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

.scrollbar-thumb{
    display: none;
  }

Answer 42

我添加了这个，它对我有用

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

参考： https ://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

Answer 43

只需将其添加到您的 css 文件中

 "&::-webkit-scrollbar": {
   display: "none",
   width: 0
  },
 "-ms-oveflow-style": "none" /*IE and Edge*/,
 "scrollbar-width": "none" /*Firefox*/,

Answer 44

我遇到了这个问题，解决起来超级简单。

得到两个容器。 内部将是您的可滚动容器，而外部显然将容纳内部：

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

它非常简单，应该适用于任何浏览器。

Answer 45

新增中

    overflow: -moz-scrollbars-none;

为我工作。