CSS 自定义滚动条样式

（一）使用 ::-webkit-scrollbar 自定义滚动条

<style scoped>
.scrolling-content {
    width: 800px;
    max-height: 66vh;
    overflow-y: scroll;
}

.scrolling-content::-webkit-scrollbar {
    width: 5px;  /* 设置滚动条的宽度 */
}

.scrolling-content::-webkit-scrollbar-thumb {
    background: #888;    /* 设置滚动条滑块的颜色 */
    border-radius: 8px;
}

.scrolling-content::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置滚动条轨道的颜色 */
}


/* 关键：将滚动条位置设置到左边 */
.scrolling-content::-webkit-scrollbar {
    left: 0; /* 强制滚动条出现在左边 */
}


/*　.scrolling-content > * {
  transform: scaleX(-1);  /* 反向翻转子元素 */
} */

</style>

（二）使用 CSS 的 transform 来移动滚动条

.scrolling-content {
  width: 100%;
  max-height: 400px;
  overflow-y: auto;  /* 启用纵向滚动 */
  overflow-x: auto;  /* 启用横向滚动 */
  transform: scaleX(-1);  /* 水平翻转容器 */
  direction: ltr;  /* 保持文本从左至右排列 */
}

.scrolling-content > * {
  transform: scaleX(-1);  /* 反向翻转子元素 */
}