如何在html中隐藏滚动条？答案

【问题标题】：how to hide scrollbar in html?如何在html中隐藏滚动条？
【发布时间】：2018-01-05 14:23:10
【问题描述】：

我想隐藏滚动条，但同时，我也想有滚动动作，即我想隐藏滚动条，但仍然想滚动查看其余内容而不实际看到滚动条。

overflow: hidden 不起作用，因为使用后我无法滚动查看内容。

如何使用 HTML/CSS/javascript 做到这一点？

我正在设计滚动条样式，但我注意到没有明确定义滚动条样式的方法，因此我使用 jQuery 和 div 制作了自定义滚动条，但最后，我有两个滚动条，一个是我自己制作的，另一个是默认的滚动条，现在我想隐藏默认滚动条。

我不想使用 -webkit- 因为它不是在所有浏览器中都被接受。

我想在下面的代码中隐藏滚动条。

		.container{
  width: 100%;
  background-color: #d5d5d5;
}
.sidebarcontainer{
  width: 300PX;
  height: 6000px;
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}
.innersidebarcontainer{
  position: relative;
      width: 100%;
    height: 100%;
}
.sidebar{
  width: 300px;
  background-color: teal;
  height: 2000px;
  top: 1px;
  position: absolute;
}
.mainpage{
  width: calc(100% - 300px);
  padding: 5px;
  padding-right: 2px;
  height: 6000px;
  display: inline-block;
  box-sizing: border-box;
}
.page{
  width: 100%;
  height: 100%;
  background-color: white;
}
.footer{
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: purple
}

<body>
  <div class="container">
    <div class="sidebarcontainer">
      <div class="innersidebarcontainer">
        <div class="sidebar">
        </div>
      </div>
    </div>
    <div class="mainpage">
      <div class="page"></div>
    </div> 
  </div>
  <div class="footer"></div>
</body>

请任何人回答！

【问题讨论】：

Hide scroll bar, but still being able to scroll的可能重复
或者这就是你想要的？ stackoverflow.com/questions/20447384/…

标签： javascript html css

【解决方案1】：

和溢出：自动；没办法？

如果你不需要它不会显示，但会在你需要时显示。

【讨论】：

【解决方案2】：

您需要添加以下样式：

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

#child {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px;
}

这是工作小提琴：http://jsfiddle.net/5GCsJ/954/

【讨论】：

能否针对我的代码提供解决方案？

【解决方案3】：

让你的滚动条透明。您可以通过以下代码做到这一点。

    ::-webkit-scrollbar
    {
        width:0px;
    }
    ::-webkit-scrollbar-track-piece
    {
        background-color: transparent;
    }

希望对您有所帮助！

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

仅适用于基于 webkit 的浏览器