How hide the scrollbar in overflow:scroll CSS

Question

I need to a scroll-able div but the scroll bar is hidden here is my code. Thanks for the help. I found this and tried but it doesn't seems to work 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>

Here is the output The right side(white)

This is answered here: stackoverflow.com/questions/13684403/… — Alex McCabe
– Alex McCabe, Commented Mar 23, 2017 at 17:24

Gwellin · Accepted Answer · 2017-03-19 05:59:49Z

The scroll bar is an OS element, and it is not possible to override its output when using overflow: scroll; or overflow: auto;.

That said, the scroll bar will disappear on many touch screen devices, and Macs (with default system settings).

You can kind of hide them if you were to make the overflow: scroll; slightly wider than a parent with overflow: hidden;. Permanently visible scroll bars have a common width of 24px, but that can vary. Also this would make it less obvious to the visitor that the element is scrollable, not to mention impossible to scroll at all if they have neither a multi-touch trackpad nor scroll wheel.

From a standards and accessibility perspective this is a bad idea. If you must have custom control over the scroll bar for an element you should look in to a Javascript library which offers the behaviour you desire.

Collectives™ on Stack Overflow

How hide the scrollbar in overflow:scroll CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related