html - 始终在 Safari iOS 13 上显示滚动条

Question

我发现一些帮助总是在 iOS 上显示滚动条，它适用于 iOS12。但是当我尝试在 iOS 13 上使用它时，滚动条再次不可见。

我使用以下 CSS 片段:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  height: 3px;
  -webkit-overflow-scrolling: auto
}

::-webkit-scrollbar:horizontal {
  height: 5px !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px !important;
  height: 3px;
  background: #41617D !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

.div-with-scrollbar{
  max-width: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: auto
}

.div-too-big{
  width: 600px;
}

<div class="div-with-scrollbar">
<div class="div-too-big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum magna eget arcu venenatis molestie in quis arcu. Donec porta purus eu odio pharetra, quis rutrum turpis posuere. Fusce vitae sagittis metus. Morbi vitae porttitor nisi. Integer sit amet porttitor turpis. Fusce vitae velit ac mi tristique rhoncus ut in erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut eros nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a sapien quis odio ornare volutpat eu eu orci. Nunc eget lectus magna. Cras non urna ex. </div>
</div>

如前所述，它适用于 iOS12，但不再适用于 iOS13(在 Browserstack 上测试)。如何让它始终显示在 iOS13 上？

我也乐于接受如何向用户表明页面的这一部分是可水平滚动的建议。

Answer 1

每次更新都会出现这种情况。此时几乎不可能强制 Safari 显示滚动条。只有最终用户可以覆盖此设置及其全局系统，但人们一直在提出解决方案。这只是需要一些时间。

Apple 有意识地决定在系统级别隐藏 iOS 中的滚动条，直到出现交互为止。 Mac OS(包括 Safari)和 Android 迅速效仿了这一决定。

建议找个库重建滚动条到show在 Mobile Safari 中仍然是最好的解决方案。也就是说，this将指导您构建自己的滚动条。

您可以使用 NiceScroll包来解决您的问题。

希望这有帮助:)