如何在移动设备上保持滚动条持续显示？（Angular4+Chrome/Chromium环境）

嘿，针对你在Angular 4应用里遇到的滚动条自动消失问题，刚好可以利用Chrome/Chromium专属的WebKit CSS特性来解决，毕竟你的应用只在这个环境运行，完全适配需求！

方法一：全局强制显示滚动条 #

如果想让整个应用的滚动条都保持可见，直接在全局样式文件（比如styles.css/styles.scss）里添加这段代码就行：

/* 定义页面滚动条的基础尺寸 */
body::-webkit-scrollbar {
  width: 8px; /* 竖向滚动条宽度，按需调整 */
  height: 8px; /* 横向滚动条高度，按需调整 */
}

/* 滚动条轨道样式 */
body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 滚动条滑块样式 */
body::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px; /* 圆角让样式更柔和 */
}

/* 滑块hover时的样式 */
body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

这段代码不仅能让滚动条始终显示，还能自定义它的外观，贴合你的应用设计风格。

方法二：针对特定容器设置 #

如果只需要某个Angular组件内的滚动条保持可见，先给目标容器加个类名（比如persistent-scrollbar），然后在组件样式里写：

.persistent-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.persistent-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.persistent-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

注意要确保这个容器已经设置了overflow: auto或overflow: scroll，否则滚动条本身不会触发显示。

额外优化：适配触摸屏交互 #

考虑到你的应用运行在TS-7990触摸屏设备上，可以给容器加这段代码优化触摸滚动体验：

.persistent-scrollbar {
  -webkit-overflow-scrolling: touch; /* 启用平滑的触摸滚动效果 */
}

这样设置后，不管是移动端还是桌面端的Chrome/Chromium，滚动条都会一直保持可见，不会再自动隐藏啦！

内容的提问来源于stack exchange，提问作者Vinnie Saletto