Question

我有一个div文本，希望能够滚动浏览而不显示垂直滚动条。我已经按照这个但无效，文本滚动但滚动条仍然可见。 Hide scroll bar, but while still being able to scroll

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

#activity_child {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}


<html>
  <body>
    <div id="activity_parent">
      <div id="activity_child">
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        good<br/>bye.
      </div>
    </div>
  </body>
</html>

Answer 1

您正在使用哪种浏览器，因为在测试代码后，此处未显示垂直滚动条。

最好还是将CSS放在样式标记中，如下所示

 <html>
    <style>
    #activity_parent {
    height: 100%;
    width: 100%; 
    overflow: hidden;
    }

    #activity_child {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser 
    compatibility */
    }
    </style>
    <body>
    <div id="activity_parent">
      <div id="activity_child">
    <!-- you content goes here -->
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        good<br/>bye.
      </div>
      </div>
      </body>
    </html>

Answer 2

您可以使用Web-kit Css，只需设置“ width：0px”，u stil就可以滚动。

::-webkit-scrollbar {
  background-color: #042654;
  width: 0px;
}
::-webkit-scrollbar-track {
  background-color: #bebebe;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb {
  background-color: #8192A9;
  border-radius: 0px;
}

无法隐藏垂直滚动条

2 个答案: