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

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

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

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

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

更新：

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

利用：

<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; 作为 per MSDN。

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

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

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>

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

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

隐藏 IE、Edge 和 Firefox 的滚动条

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

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

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

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

This answer 不包含代码，因此这是来自 page 的解决方案：

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

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

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

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

.element, .outer-container { 宽度：200px;高度：200px； } .outer-container { 边框：5px 纯紫色；位置：相对；溢出：隐藏； } .inner-container { 位置：绝对；左：0；溢出-x：隐藏；溢出-y：滚动； padding-right: 150px; } .inner-container::-webkit-scrollbar { 显示：无； }

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

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

只需编写以下代码：

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

或者

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

scrollbar-width: none; 

为我工作。

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

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

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

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

overflow-y: scroll;

或者

overflow-y: auto;

对于 Firefox 和 Edge

scrollbar-width: none;

或者

scrollbar-width: thin;

截至 2018 年 12 月 11 日（Firefox 64 及更高版本），这个问题的答案确实非常简单，因为 Firefox 64+ 现在实现了 CSS Scrollbar Styling spec。

只需使用以下 CSS：

scrollbar-width: none;

Firefox 64 发行说明链接 here。

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

.div{

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

}    

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 中测试）。

这对我有用

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

利用：

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>

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

利用

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 中滚动，但我不确定其他浏览器。

这对我有用：

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

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

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

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

.overflow-x-scroll-no-scrollbar { 溢出：隐藏； } .overflow-x-scroll-no-scrollbar div { 溢出-x：隐藏；边距底部：-17px；溢出-y：隐藏；宽度：100%； } .overflow-x-scroll-no-scrollbar div * { overflow-x: auto;宽度：100%；底部填充：17px；空白：nowrap； cursor: pointer } /* 以下类只是为了让示例看起来更好看 */ .row { width: 100% } .col-xs-4 { width: 33%;浮动：左 } .col-xs-3 { 宽度：25%；浮动：左 } .bg-gray { 背景色：#DDDDDD } .bg-orange { 背景色：#FF9966 } .bg-blue { 背景色：#6699FF } .bg-orange-light{ 背景色: #FFAA88 } .bg-blue-light{ background-color: #88AAFF }

懒人的简短版本：

.overflow-x-scroll-no-scrollbar { 溢出：隐藏； } .overflow-x-scroll-no-scrollbar div { 溢出-x：隐藏；边距底部：-17px；溢出-y：隐藏；宽度：100%； } .overflow-x-scroll-no-scrollbar div * { overflow-x: auto;宽度：100%；底部填充：17px；空白：nowrap； cursor:pointer } /* 下面的类只是为了让示例看起来更好看 */ .parent-style { width: 100px; background-color: #FF9966 }

我的问题：我不想在我的 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;
}

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

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

如果由于某种原因您想使用 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 + ')';

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

这将在正文中：

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

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