Hide scrollbar for mobile devices while keeping the scroll ability

Question

my question is almost the same with this:

Hide the scrollbar but keep the ability to scroll with native feel

I loaded a list style webpage to a webview for an android app. I found that because of the scrollbar, there's a white space on the right side of the page. It's annoying. I want to hide the scrollbar, but keep the ability to scroll with native feel like @Gabriele Cirulli said.

I found this:

http://hynchrstn.wordpress.com/2012/06/10/hide-scrollbar-but-still-scrollable-using-css/

It works fine for pc, but for mobile devices, it causes the page horizontally scrollable, which is not acceptable.

Anybody can give me some advice? Many thanks.

Answer 1

Based on the link you added I was able to come up with a more solid solution. HTML

<div class="container">
    <div class="scroll">
        [...lots of text]
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container,
.scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.container {
    overflow: hidden;
}
.scroll {
    padding-right: 20px;
    right: -20px;
    overflow-y: scroll;
}

What it does:

The .container and .scroll div both have the same dimensions as the body (full size), and since the body and .container both have overflow: hidden they will never show scrollbars in any direction.

The .scroll has an overflow-y: scroll so it can scroll vertically, but not horizontally. The scrollbar is pulled out of view with the right: -20px and I added padding of the same size so the content will always fit the screen nicely. There will be no need for the browser to let you scroll horizontally

jsFiddle

Tested on Android in Chrome and the native browser