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

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

my fiddle

【问题讨论】:

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

标签: jquery html css twitter-bootstrap


【解决方案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%,从而浪费空间。

【讨论】:

  • 但是当你开始滚动时滚动条没有出现。
  • @Mr.Gaga 它在 Android 上运行。为什么拥有滚动条如此重要?
猜你喜欢
  • 2019-10-26
  • 2012-12-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-01-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多