如何加宽滚动条？自定义图片滚动条显示不全问题求助

要让图片滚动条超出默认宽度，核心是先修改滚动条本身的宽度，再适配图片尺寸——你之前的问题是滚动条宽度还是默认值，所以放大图片就会被裁切。

修改后的代码如下：

.scroll {
  width: 200px;
  height: 100px;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
  color:#542323;
}

/* 先设置滚动条的宽度，值根据你的图片宽度调整 */
.scroll::-webkit-scrollbar {
  width: 60px; /* 改成你需要的宽度，建议和图片宽度一致 */
  background: none;
}

.scroll::-webkit-scrollbar-thumb {
  background: url('https://drive.google.com/uc?export=view&id=16zywqQCwQ_ouIn-zBScMb-z50_k91oDq') no-repeat center;
  background-size: 100% 100%; /* 让图片填满整个滑块区域 */
}

body {
  min-height: 1000vh;
}

关键改动说明： #

• 给.scroll::-webkit-scrollbar添加width属性：直接扩大滚动条轨道的宽度，给图片留出足够显示空间，避免裁切。
• 调整background-size为100% 100%：让图片完全填充滚动条滑块（thumb）的区域，搭配center确保图片居中显示。
• 移除重复的overflow设置，精简代码结构。

注意事项： #

• 这种自定义滚动条的方式仅支持WebKit内核浏览器（Chrome、Edge、Safari等）。
• Firefox目前不支持用图片作为滚动条滑块，仅能通过scrollbar-width调整宽度、scrollbar-color设置颜色。

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