在 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 迅速跟进了这一决定。

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

您可以使用

NiceScroll 包来解决您的问题。

希望这有帮助:)

Answer 2

我只是将

::-webkit-scrollbar:horizontal

 更改为 

::-webkit-scrollbar-track

，尝试一下，希望对您有所帮助。谢谢

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

::-webkit-scrollbar-track {
  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>

Answer 3

如果您正在构建 Angular 应用程序，请尝试使用

ngx-scrollbar

 库：

https://github.com/MurhafSousli/ngx-scrollbar

设置很简单，现在滚动条即使在 iOS 中也始终显示。