如何为Div添加顶部与底部双水平滚动条？

以下是实现Div顶部与底部同时显示水平滚动条的代码方案：

HTML结构 #

<div class="row">
  <div class="col-2">
    <div class="col-canvas">
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <div class="col-4">
    <p>Hello</p>
  </div>
</div>

CSS样式 #

#canvas{
   background-color:red;
}
.col-canvas{
   overflow-y: hidden;
}

效果说明 #

通过上述代码，.col-canvas容器会同时在顶部和底部显示水平滚动条，当容器内的横向内容超出宽度时，可通过顶部或底部的滚动条进行横向滚动操作。

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