Hide browser scroll-bars

Question

I'm using the plugin iscroll just in my data-role="content" but there's a huge scrollbar appearing in my full page: scrollbar

I already tried some solutions found here in SO like:

but none work.

I check this website too, but no luck either.

Can you help me?

My HTML:

<div data-role="content" data-theme="c">
            <div id="Container"></div>
            <div id="Treelist">
                <div id="scroller">
                    <ul id="Listview" ></ul>
                </div>
            </div>
        </div>

My CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;   
}

#Treelist {
    position:relative;
    z-index:1;
    top:0; 
    bottom:0; 
    left:0;
    width:100%;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#scroller {
    position:relative; z-index:1;
/* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}


#Treelist ul {
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#Treelist li {
    padding:0 10px;
    height:150px;
/*  line-height:40px; */
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}

You mean this? [link](http://stackoverflow.com/q/16670931/1577396) — Mr_Green, May 28 '15 at 13:33
@Mr_Green I'm using this [plugin](http://lab.cubiq.org/iscroll5/demos/simple/) — msm.oliveira, May 28 '15 at 13:38
@Mr_Green your answer did not work too. In fact, it made my `ul` disappear — msm.oliveira, May 28 '15 at 13:56
Then it seems the problem is somewhere else. Please create a small fiddle which demonstrates your problem. If you do so we can help you further. — Mr_Green, May 29 '15 at 03:48
@Mr_Green just found the problem right now. It was a CSS I had there. I don't know why it gave me that scrollbar while in another project that CSS didn't show the scrollbar. Thanks — msm.oliveira, May 29 '15 at 08:17

score 0 · Answer 1 · answered May 28 '15 at 13:35

0

You could use this in order to hide the scrollbars:

#scroller::-webkit-scrollbar {
display: none;
}

#scroller {
-ms-overflow-style: none;
}

Just have a look at it in different browsers, I'm sure it works in Safari, IE and Chrome

answered May 28 '15 at 13:35

Friendly Crook

1,188
1
10
13

The scrollbar persists :( – msm.oliveira May 28 '15 at 13:40

score -1 · Answer 2 · answered May 28 '15 at 13:40

This should work in Webkit based browsers (Chrome/Safari) as well as IE 10+.

div::-webkit-scrollbar { width: 0 !important; display: none; }
div { -ms-overflow-style: none; }

Unfortunately, there is no good cross browser solutions to edit scrollbars. Scrollbars are created by the browser, and as such the amount that we can do to them is limited by what the browsers allow. I've learned it's best to just leave them alone, most people don't even notice them.

Hide browser scroll-bars

2 Answers2