调整div滚动条适配斜切角的实现方案

完全可以不用JavaScript实现，以下是两种实用的纯CSS解决思路：

方法一：针对WebKit内核浏览器（Chrome/Edge/Safari）直接自定义滚动条 #

利用WebKit的滚动条伪元素，给滚动条轨道设置上下外边距，让滑块避开容器的斜切/圆角区域：

/* 带斜切/圆角的滚动容器 */
.scroll-container {
  width: 300px;
  height: 400px;
  /* 示例圆角，替换成你的斜切样式如clip-path */
  border-radius: 20px;
  overflow: auto;
}

/* 给滚动条轨道设置上下外边距，值和容器圆角/斜切高度一致 */
.scroll-container::-webkit-scrollbar-track {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 可选：自定义滚动条滑块样式 */
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

/* 设置滚动条宽度 */
.scroll-container::-webkit-scrollbar {
  width: 8px;
}

方法二：跨浏览器兼容方案（含Firefox） #

通过容器嵌套+内外边距的组合，让外层容器的圆角/斜切裁剪掉滚动条的上下部分：

/* 外层容器：负责显示斜切/圆角，控制整体尺寸 */
.outer-container {
  width: 300px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
}

/* 内层滚动容器：实际承载滚动内容，设置负外边距让滚动条延伸到外层容器外 */
.inner-scroll {
  height: 100%;
  overflow: auto;
  margin-top: -20px;
  margin-bottom: -20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

使用时把内容放在.inner-scroll里即可，外层容器的圆角会自动裁剪掉滚动条超出的上下部分，同时内层的padding保证内容不会被圆角遮挡。

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