html - 无法隐藏垂直滚动条

标签 html css

我有一个文本 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 */
    }
        <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>

最佳答案

您使用的是什么浏览器,因为在测试您的代码后,此处未显示垂直滚动条。

最好还是将 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>

关于html - 无法隐藏垂直滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45900542/

相关文章:

javascript - jQuery 无法在我的 HTML 页面上运行

css - 模式打开时防止背景滚动(不是 BOOTSTRAP)

html - 如何使用表单 id 将 css 应用于表单中的所有文本框

javascript - 使用 Jquery 控制 <div> 标签内的 <span> 标签

html/css 为我的菜单中的每个列表项添加一个图像

html - 将 css 应用于单个元素,类不起作用

css - 我可以根据响应式设计中的单个元素设置不同的断点吗?

css - 无法在 kendo-treeview 中为 kendo-checkbox 应用 css 样式

jquery - 圆形按钮 CSS3 悬停不起作用

python - 如何从 Jinja 的列表中准确获取一个元素?