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

滚动条是一个OS元素，使用overflow: scroll;或overflow: auto;时无法覆盖其输出。

也就是说，滚动条将在许多触摸屏设备和Mac上消失（使用默认系统设置）。

如果要使overflow: scroll;略宽于overflow: hidden;的父级，则可以隐藏它们。永久可见的滚动条的公共宽度为24px，但这可能会有所不同。此外，这将使访问者不太明显该元素是可滚动的，更不用说如果它们既没有多点触控触控板也没有滚轮，则根本无法滚动。

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

如何在溢出中隐藏滚动条：滚动CSS

1 个答案: