背景

在移动端浏览器中，当用户滚动页面时，浏览器会自动显示滚动条。但是，当用户滚动停止滚动时，滚动条会自动隐藏。这是因为浏览器会根据用户的滚动位置来自动判断是否需要显示或隐藏滚动条。

但是，在某些情况下，我们可能希望在用户刚进入页面或者在当前页面停止滚动时，滚动条仍然保持显示状态。一般情况下，这可以通过设置 overflow-y 属性为 scroll 来实现。

但是问题并未解决。

解决方案

经过测试研究发现，仅仅设置 overflow 属性为 auto 无法实现移动端滚动条一直显示，还需要辅助设置 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb 。

• ::-webkit-scrollbar：设置滚动条的整体样式。
• ::-webkit-scrollbar-thumb：设置滚动条的滑块样式。

示例：

 .container {
    overflow-y: auto;
    width: 100%;
  }
  /* Webkit 浏览器的滚动条样式 */
  .container::-webkit-scrollbar {
    width: 5px;
  }
  /* Webkit 浏览器的滚动条样式 */
  .container::-webkit-scrollbar-thumb {
    background-color: #888;
  }

演示

zoom 代码演示 横向滚动

<div class="container">
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
</div>

 .container {
    margin:0 auto;
    overflow: auto;
    width: 500px;
    display: flex;
    height: 100px;
    background-color: pink;
  }

  h1 {
    display: inline-block;
    min-width: 120px;
    padding: 20px;
    margin: 12px;
    background-color: #eee;
  }

  /* Webkit 浏览器的滚动条样式 */
  .container::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .container::-webkit-scrollbar-thumb {
    background-color: #888;
  }

zoom 代码演示 竖向滚动

<div class="container">
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
</div>

 .container {
    margin:0 auto;
    overflow: auto;
    width: 500px;
    height: 200px;
    background-color: pink;
  }

  h1 {
    min-width: 120px;
    padding: 20px;
    margin: 12px;
    background-color: #eee;
  }

  /* Webkit 浏览器的滚动条样式 */
  .container::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .container::-webkit-scrollbar-thumb {
    background-color: #888;
  }