如何强制滚动条出现在 ipad 中？（移动 Safari）[重复]

【问题标题】：How to force a scroll bar to appear in the ipad? (Mobile Safari) [duplicate]如何强制滚动条出现在 ipad 中？（移动 Safari）[重复]
【发布时间】：2013-02-12 22:17:05
【问题描述】：

我无法在移动 Safari 中显示滚动条，因为 overflow: auto 在有可滚动内容时不起作用。我找到了这个 css 属性：

-webkit-overflow-scrolling: 触摸

正如一些人所建议的，这是对隐藏滚动条的移动 Safari 的修复，但它对我不起作用。有人对我如何在移动 Safari 中强制设置滚动条以向用户提供他们应该滚动的视觉效果有任何建议吗？

【问题讨论】：

我相信iOS 滚动条在不使用时会淡入背景。我不相信您可以强制显示那些小条。 -webkit-overflow-scrolling 只是强制滚动在那里，不一定要显示我相信的滚动条。正如我所说的，我相信这些条在不使用时会消失。
即使是 iScroll 演示：cubiq.org/iscroll 也不会一直显示它们，只有在使用时才会显示它们，而且 iScroll 是强制滚动选项的全部。我要声明，这是不可能的。

标签： javascript css ipad mobile-safari

【解决方案1】：

在您的 CSS 中包括：

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    -webkit-overflow-scrolling: auto;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

根据需要自定义外观。

Stackoverflow source

Original source

【讨论】：

谢谢！这确实有效，但是如果您还选择使用-webkit-overflow-scrolling: touch; 启用惯性滚动，那么这将覆盖滚动条的外观（并且使它们不典型地出现）
@nothingisnecessary 答案已更新。如果您的 CSS 中某处有 -webkit-overflow-scrolling: touch;，它将无法工作。解决方案是删除所有出现的 -webkit-overflow-scrolling: touch; 或放置 -webkit-overflow-scrolling: auto;