Question

我使用以下代码隐藏垂直滚动条，但也隐藏了水平滚动条

html {
    overflow: scroll !important;
    overflow-x: hidden !important;
}

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

Answer 1

#container {
    background: wheat;
    width:200px;
    height:200px;
    overflow:hidden !important;
}
#col {
    position: relative;
    width:200px;
    height:200px;
    top:20px;
    left:20px;
    overflow:auto;
}

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
</head>

<body>
  The content of the document......
  <div id="container">
    <div id="col">
      1<br> 2
      <br> 3
      <br> 4
      <br> 5
      <br> 6
      <br> 7
      <br> 8
      <br> 9
      <br> 10
      <br> 11
      <br> 12
      <br> 13
      <br> 14
      <br> 15
      <br> 16
      <br> 17
      <br> 18
      <br> 19
      <br> 20
      <br>
    </div>
  </div>
</body>

</html>

注意：-您需要在特定的div上应用滚动，此示例显示了您要执行的功能的良好演示。

Answer 2

当内容过大以适合div时，使用overflow: auto自动添加滚动条。如果只想针对水平或垂直滚动进行自定义，请使用overflow-x: auto或overflow-y: auto。如果内容可以轻松放入父div内，则滚动条不会显示为auto值。

如何隐藏垂直滚动条，但仍然可以滚动但不隐藏垂直滚动条

2 个答案: