如何为内容超出视口高度的div创建粘性水平滚动条？

需求说明 #

需要实现一个div容器，具备以下特性：

• 垂直方向不显示滚动条
• 水平方向根据内容长度按需显示滚动条
• 水平滚动条始终粘在视口底部，用户无需滚动到页面底部就能进行水平滚动操作，效果类似GitHub长文件页面的水平滚动条

此前找到过类似方案，但依赖jQuery，而我未使用jQuery，因此自己实现了一套原生JS方案，效果与GitHub一致，滚动条始终可见。

实现代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Scrollbar Example</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .container {
        position: relative;        
        width: calc(100vw - 88px);
        margin: 40px;
        border: 2px solid black;
      }
      .content {
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        /* 隐藏原生滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
      }
      .content::-webkit-scrollbar { 
        display: none; /* Chrome、Safari 和 Opera */
      }
      .scrollbar-container {
        position: sticky;
        bottom: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        height: 17px;
      }
      .scrollbar {
        height: 1px;
        width: 200%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <!-- 添加足够文本使内容水平溢出 -->
        <!-- 重复多行使内容垂直溢出 -->
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, vero, dolorem, iusto dolorum longe vero, dolorem, iusto dolorum<br>
        <!-- 按需添加更多行 -->
      </div>
      <div class="scrollbar-container">
        <div class="scrollbar"></div>
      </div>
    </div>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        const contentDiv = document.querySelector(".content");
        const scrollbarContainer = document.querySelector(".scrollbar-container");

        scrollbarContainer.addEventListener("scroll", function() {
          contentDiv.scrollLeft = scrollbarContainer.scrollLeft; // 同步隐藏的原生滚动条位置
        });
      });
    </script>
  </body>
</html>

实现原理 #

1. 内容容器：.content设置overflow-x: scroll实现水平滚动，同时通过浏览器私有属性隐藏原生滚动条，避免出现两条滚动条。
2. 粘性滚动条容器：.scrollbar-container使用position: sticky; bottom: 0实现粘在视口底部，内部的.scrollbar设置足够宽的宽度触发水平滚动条。
3. 滚动同步：通过监听滚动条容器的滚动事件，同步内容容器的scrollLeft值，实现操作粘性滚动条时内容同步滚动。

内容的提问来源于stack exchange，提问作者Justin Tanner