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

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

在Google Chrome浏览器中：

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

但是Mozilla Firefox和Internet Explorer似乎无法正常工作。

我也在CSS中尝试过：

overflow: hidden;

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

有什么办法可以删除滚动条，同时仍然可以滚动整个页面？

请仅使用CSS或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工作小提琴

信息：

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

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

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

这对我有用简单的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;

更新：

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

这是我目前所知的最少hacky的跨浏览器解决方案。查看演示。

原始答案：

这是尚未提及的另一种方式。它非常简单，仅涉及两个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内容（如果将来有此内容）。每个浏览器对于各自的栏可能具有不同的特定属性。

对于微软边缘使用：-ms-overflow-style: -ms-autohiding-scrollbar;或-ms-overflow-style: none;为每MSDN。

Firefox没有等效的功能。尽管有一个jQuery插件可以实现此目的，但 http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

这个答案不包括代码，因此这是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>

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

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

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

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

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

以下内容适用于Microsoft，Chrome和Mozilla的特定div元素：

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

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

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

只需使用以下CSS：

scrollbar-width: none;

Firefox 64发行说明链接在此处。

采用：

的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>

采用

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

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

我的问题：我的HTML内容不需要任何样式。我希望我的身体可以直接滚动而不需要任何滚动条，而只能进行垂直滚动，并且可以使用CSS网格在任何屏幕尺寸下。

该箱大小值的影响填充或利润率的解决方案，它们可与盒大小：内容盒。

我仍然需要“ -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;
}

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

在两种情况下都起作用的是将内部的宽度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 + ')';

这就是我水平滚动的方式。仅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>

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

这是一种独特的解决方案，但仍适用于所有浏览器...

标记如下，并且需要位于相对位置的内部（并且应设置其宽度，例如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;
}

该perfect-scrollbar插件似乎是一种解决方法，请参见：https : //github.com/noraesae/perfect-scrollbar

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

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

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

另一种怪异的方法是先执行以下操作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事件。这可能对您有用，但是绝对不是一个好的解决方案。

我只想共享一个合并的代码段，以隐藏开发时使用的滚动条。它是在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 */
}

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

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

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

.div{

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

}    

另一个简单的工作提琴：

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

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

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

这个棘手的解决方案即使在旧的IE Web浏览器上也可以使用

这是[ 垂直滚动条 ] 的解决方法

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 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

只需将孩子的宽度的宽度设置为100％，填充为15像素，overflow-x即可滚动并overflow:hidden针对父级和您想要的任何宽度。

它可以在所有主要浏览器（包括Internet Explorer和Edge）上完美运行，但Internet Explorer 8及更低版本除外。