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

【问题标题】：How do I add back the scrollbar in mobile?如何在移动设备中添加回滚动条？
【发布时间】：2012-10-20 13:48:54
【问题描述】：

我已将滚动条从页面的页眉区域中移除，它看起来不错，但在移动设备上（至少是 iPhone，我不了解 Android），滚动条完全消失了。如何找回？

【问题讨论】：

您希望滚动条出现在您的 iPhone 上还是标题上？
不在标题上。我希望滚动条出现在手机/iphone上。如果您同时查看桌面和 iPhone 上的页面，它们目前看起来不同。 iphone上滚动不流畅，iphone上没有出现滚动条
一定要有滚动条吗？
是的。照原样，iPhone 上的滚动并不流畅......

【解决方案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。

【讨论】：

这似乎确实适用于移动设备。不过，我宁愿不要乱搞标题。
我很高兴它能正常工作。值得注意的是，标题类上只有 4 行额外的行（如果计算背景颜色，则为 5 行）。在视觉上它是相同的，因此您的用户不会注意到任何差异。如果您只想保持标头类干净，请添加第二个名为 .fixed-top 的类并将样式放入其中以将元素固定到顶部。

【解决方案2】：

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

原因是手机很窄。您不希望滚动条占据屏幕宽度的 5-10%，从而浪费空间。

【讨论】：