在保持滚动能力的同时，隐藏移动设备的滚动条 [英] Hide scrollbar for mobile devices while keeping the scroll ability

问题描述

我的问题几乎与此相同：

隐藏滚动条，但保持滚动的本地感觉能力

我为Android应用程序加载了一个列表样式的网页到 webview 。我发现由于滚动条的原因，页面右侧有一个空白区域。它很烦人。我想隐藏滚动条，但保持滚动的本地感觉，就像@Gabriele Cirulli说的。

我发现这个： p>

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

它适用于pc，但对于移动设备而言，它会导致页面水平滚动，这是不可接受的。

任何人都可以给我一些建议吗？非常感谢。

解决方案

基于您添加的链接，我能够想出更稳固的解决方案。
HTML

 < div class =container> 
< div class =scroll> 
 [...很多文字] 
< / div> 
< / div> 
  

CSS

  body {
 margin：0; 
 padding：0; 
 overflow：hidden; 
} 
 
 .container，
 .scroll {
 position：absolute; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
} 
 
 .container {
 overflow：hidden; 
} 
 .scroll {
 padding-right：20px; 
 right：-20px; 
 overflow-y：scroll; 
} 
  

功能：

.container 和 .scroll div的尺寸与正文（全尺寸）相同，并且因为body和 .container 都有 overflow：hidden 它们永远不会显示任何方向的滚动条。

$ b $ .scroll 有一个 overflow-y：scroll ，所以它可以垂直滚动，但不水平滚动。使用 right：-20px 将滚动条拉出视图，并且我添加了相同大小的填充，以便内容始终适合屏幕。浏览器不需要让你水平滚动

jsFiddle

使用Chrome和本地浏览器在Android上进行测试

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.

解决方案

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

这篇关于在保持滚动能力的同时，隐藏移动设备的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！