隐藏滚动条，但仍然能够滚动

用：

<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 使用：或根据 MSDN。-ms-overflow-style: -ms-autohiding-scrollbar;-ms-overflow-style: none;

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

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

#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 工作小提琴

信息：

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

这将在身体上：

<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>
</div>

这是CSS：

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

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

用

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

只需使用以下三行，您的问题就会得到解决：

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

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

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

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

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

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

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>

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

用：

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>

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

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

在这两种情况下，有效的方法是将内部的宽度增加到 100% 加上滚动条的宽度（假设在外部 div 上）。divoverflow: 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 + ')';

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

这就是我对水平滚动的处理方式;只有 CSS，并且适用于 Bootstrap / col-* 等框架。它只需要两个额外的 s 和带有 or 设置的父级：divwidthmax-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>

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

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

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

更新：

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

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

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

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

此解决方案适用于具有“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 年 12 月 11 日（Firefox 64 及更高版本），这个问题的答案确实非常简单，因为 Firefox 64+ 现在实现了 CSS 滚动条样式规范。

只需使用以下 CSS：

scrollbar-width: none;

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

以下内容在Microsoft，Chrome和Mozilla上为特定的div元素工作：

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

这对我有用：

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

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

这对我跨浏览器有效。但是，这不会隐藏移动浏览器上的本机滚动条。

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

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

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

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

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

.div{

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

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

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

隐藏 IE、Edge 和 Firefox 的滚动条

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

此外，所有浏览器都可以在没有滚动条的情况下滚动。

CSS的

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

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

/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* Internet Explorer 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 the y axis */

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

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

[HTML全

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

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

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

overflow-y: scroll;

或

overflow-y: auto;

对于 Firefox 和 Edge

scrollbar-width: none;

或

scrollbar-width: thin;

scrollbar-width: none; 

对我有用。

只需编写以下代码：

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

或

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

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

这对我有用

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