layui scrollbar 横向

要在 layui 中实现横向滚动条，可以使用 layui 自带的滚动条组件，然后通过一些 CSS 样式进行调整。

首先，需要引入 layui 的滚动条组件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js"></script>

然后，在需要添加横向滚动条的元素上加上 `layui-hide` 类，以隐藏原生滚动条，并添加 `layui-scrollbar` 类，以启用 layui 的滚动条。

<div class="layui-scrollbar layui-hide">
  <!-- 横向滚动条内容 -->
</div>

接下来，可以通过 CSS 样式对滚动条进行一些调整。以下是一个简单的例子：

.layui-scrollbar {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100px;
  width: 500px;
}

.layui-scrollbar::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.layui-scrollbar::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 5px;
}

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

在上面的例子中，`overflow-x: auto` 和 `overflow-y: hidden` 用于控制元素的横向滚动和纵向滚动；`white-space: nowrap` 用于让内容在同一行上显示；`height` 和 `width` 分别用于控制滚动条的高度和宽度。

接着，通过 `-webkit-scrollbar` 相关的 CSS 样式对滚动条进行调整。`::-webkit-scrollbar` 用于控制整个滚动条的样式，`::-webkit-scrollbar-thumb` 用于控制滚动条拖动块的样式，`::-webkit-scrollbar-track` 用于控制滚动条轨道的样式。

最后，初始化 layui 滚动条组件：

layui.use('element', function(){
  var element = layui.element;
  
  element.init();
});

这样就可以在 layui 中实现横向滚动条了。