CSS实现横向滚动条并自定义样式 - 让页面内容水平滚动

当页面中的内容过大时，可以通过增加横向滚动条来实现水平滚动。下面是一种实现方式：

1. 在页面的样式表中添加如下CSS样式，用于设置横向滚动条的样式：

.scrollbar {
  overflow-x: scroll; /* 显示横向滚动条 */
  white-space: nowrap; /* 防止内容换行 */
  /* 设置滚动条的样式 */
  scrollbar-width: thin;
  scrollbar-color: #888 #eee;
}

/* 样式Webkit浏览器（Chrome, Safari）的滚动条 */
.scrollbar::-webkit-scrollbar {
  width: 8px;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #eee;
}

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

/* 样式Firefox浏览器的滚动条 */
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #eee;
}

.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #eee;
}

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

.scrollbar::-webkit-scrollbar-track {
  background-color: #eee;
}

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

.scrollbar::-moz-scrollbar {
  width: 8px;
}

.scrollbar::-moz-scrollbar-track {
  background-color: #eee;
}

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

2. 在页面中的需要添加横向滚动条的元素上添加'scrollbar'类名，如：

<div class="scrollbar">
  <!-- 需要横向滚动的内容 -->
</div>

通过以上步骤，就可以在页面的最底部增加横向滚动条，并且可以修改滚动条的样式。