如何组合3张背景图：1张拉伸居中，另外2张分别置于顶部和底部

你要实现滚动条滑块中间背景图上下各预留15px的需求，可以直接通过CSS背景的四值定位语法配合calc()动态计算尺寸实现，修改::-webkit-scrollbar-thumb的相关属性即可，完整修改后的代码如下：

/* 全局滚动条样式，要仅作用于指定容器的话，选择器前加容器ID即可，比如 #scroll::-webkit-scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: url('你的轨道图资源地址') right 2px center no-repeat;
  background-size: 10px 100%;
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background-image: url('你的滑块顶部图资源地址'),
    url('你的滑块底部图资源地址'),
    url('你的滑块中间拉伸图资源地址');
  /* 四值定位分别指定三个背景的位置：顶部图靠右顶边、底部图靠右底边、中间图靠右、距离顶部15px */
  background-position: right top,
    right bottom,
    right 0 top 15px;
  background-repeat: no-repeat,
    no-repeat,
    no-repeat;
  /* 中间图高度计算为总高度减去上下各15px，刚好不会覆盖两端的固定背景 */
  background-size: 15px 15px,
    15px 15px,
    15px calc(100% - 30px);
}

#scroll {
  height: 400px;
  width: 200px;
  border: 1px solid black;
  overflow-y: scroll;
}

div > div {
  height: 1000px;
}

<div id="scroll">
<div>Inner Container</div>
</div>

原理解释 #

• 背景四值定位语法支持同时指定两个方向的偏移量，right 0 top 15px就表示背景右侧距离容器右侧0px，顶部距离容器顶部15px，完美实现单侧多方向偏移需求
• calc(100% - 30px)会根据滑块的实时高度动态计算中间拉伸图的高度，自动预留上下各15px的位置给两端的固定背景，实现和border-image一致的自适应适配效果
• 如果要限制样式仅作用于指定容器，只需要在所有::-webkit-scrollbar开头的选择器前加上容器的选择器即可，比如#scroll::-webkit-scrollbar，不会影响页面其他滚动条的样式

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