css做div左滚动条

当我们的网页内容过多时，我们很有可能会想到使用滚动条来方便用户查看。众所周知，滚动条有垂直和水平两种类型，而今天我们将聚焦于水平滚动条的实现以及应用，下面将详细介绍使用CSS如何实现一个左滚动条的效果。

首先我们需要创建一个盒子（div）容器，如下所示：

<div class="container">
  <div class="content">
    <p>这是一段很长的内容,这是一段很长的内容,这是一段很长的内容…</p>
  </div>
</div> 

接下来，我们需要通过CSS样式来设置我们的盒子容器和内容相应的属性，代码如下：

.container {
  width: 300px; /* 容器宽度 */
  height: 100px;/* 容器高度 */
  overflow-x: scroll; /* 水平滚动条显示 */
  overflow-y: hidden; /* 垂直滚动条隐藏 */
  white-space: nowrap; /* 不换行显示 */
}

.content {
  width: 600px; /* 内容宽度大于容器宽度 */
  display: inline-block; /* 内容以行内块元素显示 */
} 

代码中，我们通过设置容器的宽度、高度以及水平和垂直滚动条的显示来制作一个可以左右滚动的盒子容器，再通过设置内容的宽度为600px，使其大于容器的宽度，使得在内容过多时左侧出现水平滚动条。

最后，我们只需要添加一些美化的CSS样式就能让我们的滚动条更加美观了。代码如下所示：

/*滚动条的样式*/
::-webkit-scrollbar {
    height: 5px;
    width: 8px;
    background-color: #f5f5f5;
}
 
::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 20px;
}
 
::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
} 

通过上面的CSS代码，我们完成了一个左滚动条的效果，你可以随意改动样式来使其更加与众不同，让你的页面展示更加出众。