如何在移动设备中添加滚动条？

Question

我已经将滚动条从页面上的标题区域移开了，除了移动设备（至少iPhone，我不知道Android）之外它看起来不错，滚动条完全消失了。我如何取回它？

my fiddle

Answer 1

您可以尝试不同的方法。使整个页面像平常一样滚动（没有overflow-y）并通过position:fixed;将标题修复到顶部（我认为这是你想要的？）

以下是您的小提琴的编辑版本：http://jsfiddle.net/TnKNe/

如果这不起作用，您可以尝试this jQuery custom content scroller，这样您就可以完全控制元素的滚动。它说它也有移动支持，但我以前从未使用它，因此里程可能会有所不同。

注意： position:fixed;在Android中支持不好或根本不支持。 iOS4及更早版本将其视为position:static;。 iOS5和最新的Android都支持它：http://caniuse.com/css-fixed

<强>更新

我发现this tutorial on content scrolling in ios5看起来像是给你的！他们用来在中间获得带有可滚动区域的固定标题的技术显然只适用于ios5和更新版本。他们有another tutorial doing the same thing with a plugin called iScroll看起来更健壮，也适用于Android。看起来它正是你想要的。这是iScroll website。

Answer 2

在移动设备上，滚动条通常是不可见的，直到您开始滚动（在屏幕上拖动手指）。即便如此，它们只是一个很薄的指示器，告诉您在页面上的位置，您实际上无法触摸它（仅在某些应用程序/浏览器中）。

原因是手机很窄。你不想浪费空间，滚动条占你屏幕宽度的5-10％。