css - 如何 overflow hidden 的滚动条 :scroll CSS

Question

我需要一个可滚动的 div，但滚动条隐藏在这里是我的代码。谢谢您的帮助。我找到了这个并试过了，但它似乎不起作用 http://jsfiddle.net/5GCsJ/954/

CSS

.bg_info_profile .bg_profile_right {
  background: white;
  float: right;
  width: 50%;
  height: 670px;
  border: 1px solid green;
  overflow: hidden;
}
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 {
  width: 100%;
  height: 99%;
  border: 1px solid blue;
  overflow: auto;
  padding: 50px;
}
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 .container_center {
  text-align: center;
  margin-top: 30px;
}
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 .container_center .profile_img_pentagon {
  width: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: relative;
}
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 p {
  margin-top: 50px;
  text-align: center;
}

HTML

<div class="bg_info_profile">
    <div class="bg_profile_left">
        asdfas dfasdf asdf asdfasdfas dfasdfas dfasdfasdf
        asdfasdfasdfa sdfasdfasdfas dfasdfasdfa sdfasdf
        asdfasd fasdfasdf asdfasdf asdfasdfa sdfasdfasdf
        asdf asdfasdfa sdfasdfasdfa sdfasdfasd fasdfasdf                
        asdfas dfas dfasd fasdfasdfasd fasdfa sdfa sdfasdf
    </div>
    <div class="bg_profile_right">
        <div class="conatiner_hidden_scroll_2">
            <div class="container_center">
                <!-- Some code -->
            </div>
            <p></p>
            <p>asdfas dfasdf asdf asdfasdfas dfasdfas dfasdfasdf
            asdfasdfasdfa sdfasdfasdfas dfasdfasdfa sdfasdf
            asdfasd fasdfasdf asdfasdf asdfasdfa sdfasdfasdf
            asdf asdfasdfa sdfasdfasdfa sdfasdfasd fasdfasdf                
            asdfas dfas dfasd fasdfasdfasd fasdfa sdfa sdfasdf</p>
            <p>asdfas dfasdf asdf asdfasdfas dfasdfas dfasdfasdf
            asdfasdfasdfa sdfasdfasdfas dfasdfasdfa sdfasdf
            asdfasd fasdfasdf asdfasdf asdfasdfa sdfasdfasdf
            asdf asdfasdfa sdfasdfasdfa sdfasdfasd fasdfasdf                
            asdfas dfas dfasd fasdfasdfasd fasdfa sdfa sdfasdf</p>
        </div>

    </div>
</div>

这是输出右侧(白色)

Answer 1

滚动条是操作系统元素，使用 overflow: scroll; 或 overflow: auto; 时无法覆盖其输出。

也就是说，滚动条会在许多触摸屏设备和 Mac(具有默认系统设置)上消失。

如果您要使 overflow: scroll; 比具有 overflow: hidden; 的父级稍宽，您可以隐藏它们。永久可见的滚动条具有 24px 的通用宽度，但可以有所不同。此外，这会使访问者不太清楚该元素是可滚动的，更不用说如果他们既没有多点触控板也没有滚轮就根本不可能滚动。

从标准和可访问性的 Angular 来看，这是一个坏主意。如果您必须对某个元素的滚动条进行自定义控制，您应该查看提供您想要的行为的 Javascript 库。