如何为整个滚动条设置最大宽度？

方案1：修改现有webkit滚动条样式（仅兼容webkit内核浏览器） #

因为::-webkit-scrollbar系列原生属性没有直接配置水平滚动条长度的参数，我们可以通过轨道透明边框+背景裁剪的方式挤压出你想要的滚动条宽度，修改后的代码如下：
首先给你的滚动容器添加基础样式：

/* 你的可滚动容器类名，替换成你实际用的类名即可 */
.scroll-box {
  overflow-x: auto;
  position: relative;
  /* 其余你原本的容器样式保留 */
}

滚动条样式调整：

/* 水平滚动条基础配置 */
.scroll-box::-webkit-scrollbar {
  height: 10px;
  background: transparent;
}

/* 滚动条轨道 */
.scroll-box::-webkit-scrollbar-track {
  border-radius: 10px;
  /* 示例为滚动条宽度固定200px且居中：左右设置透明边框挤压轨道显示区域 */
  border-left: calc(50% - 100px) solid transparent;
  border-right: calc(50% - 100px) solid transparent;
  /* 背景仅在padding区域生效，边框区域透明 */
  background-clip: padding-box;
  /* 可按需设置轨道背景色，示例为浅灰色 */
  background: #f2f2f2;
}

/* 滚动条滑块 */
.scroll-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #c51694;
}

.scroll-box::-webkit-scrollbar-corner {
  display: none;
}

如果需要滚动条靠左/靠右显示，仅调整border-left和border-right的取值即可：

• 靠右200px宽：设置border-left: calc(100% - 200px) solid transparent; border-right: 0;
• 靠左200px宽：设置border-right: calc(100% - 200px) solid transparent; border-left: 0;

方案2：自定义DOM滚动条（全浏览器兼容） #

如果需要兼容Firefox等非webkit内核浏览器，或者需要更灵活的滚动条样式控制，推荐用自定义DOM实现：

1. 给可滚动容器添加底部padding，把原生滚动条挤出可视区域，外层父容器设置overflow: hidden隐藏原生滚动条：

.scroll-wrapper {
  overflow: hidden;
}
.scroll-box {
  overflow-x: auto;
  /* 底部padding值等于滚动条高度，挤出原生滚动条 */
  padding-bottom: 10px;
}
/* 自定义滚动条容器，放在.scroll-wrapper内，和.scroll-box同级 */
.custom-scrollbar {
  width: 200px; /* 你想要的滚动条宽度 */
  height: 10px;
  border-radius: 10px;
  background: #f2f2f2;
  margin: 0 auto; /* 居中，按需调整位置 */
  position: relative;
}
/* 自定义滑块 */
.custom-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  background: #c51694;
}

2. 加少量JS同步滚动位置：

const scrollBox = document.querySelector('.scroll-box')
const scrollThumb = document.querySelector('.custom-scroll-thumb')
const scrollBarWidth = 200 // 自定义滚动条容器宽度

// 计算滑块宽度
const updateThumbWidth = () => {
  const ratio = scrollBox.clientWidth / scrollBox.scrollWidth
  scrollThumb.style.width = `${ratio * scrollBarWidth}px`
}
// 同步滑块位置
const updateThumbPosition = () => {
  const scrollRatio = scrollBox.scrollLeft / (scrollBox.scrollWidth - scrollBox.clientWidth)
  scrollThumb.style.left = `${scrollRatio * (scrollBarWidth - scrollThumb.offsetWidth)}px`
}

// 初始化
updateThumbWidth()
updateThumbPosition()

// 监听滚动同步位置
scrollBox.addEventListener('scroll', updateThumbPosition)
// 监听窗口大小变化重算滑块宽度
window.addEventListener('resize', () => {
  updateThumbWidth()
  updateThumbPosition()
})

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