Question

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

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>

请任何人回答！

Answer 1

溢出：自动;是不可能的？

如果你不需要，它将不显示，但是当你这样做时会显示。

Answer 2

您需要添加以下样式：

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

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

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

Answer 3

试试这个：

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

Answer 4

使滚动条透明。您可以通过以下代码执行此操作。

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

希望这会对你有帮助！

如何在html中隐藏滚动条？

4 个答案: