如何组合 3 个背景图像，其中一个被拉伸，两个用于顶部和底部？

Question

I want to create a custom scrollbar with the ::-webkit-scrollbar* selectors, but I think the answer can also be used for any other container.

 ::-webkit-scrollbar { width: 20px; } ::-webkit-scrollbar-track { background: url('https://svgshare.com/i/bqE.svg') right 2px center no-repeat; background-size: 10px 100%; width: 15px; } ::-webkit-scrollbar-thumb { background-image: url('https://svgshare.com/i/brF.svg'), url('https://svgshare.com/i/brD.svg'), url('https://svgshare.com/i/bqv.svg'); background-position: right top, right bottom, right 15px; background-repeat: no-repeat, no-repeat, no-repeat; background-size: 15px 15px, 15px 15px, 15px 100%; } #scroll { height: 400px; width: 200px; border: 1px solid black; overflow-y: scroll; } div > div { height: 1000px; }

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

The example is a little problematic because of the missing images. The goal is to have a top and a bottom area of 15x15px where the "top"/"bottom"-background is shown.

The problem is: The streched image in the middle need to have a 15px offset from top AND 15px from bottom. It's easy to have the top OR bottom offset, but I don't know how to get both. The middle image does have curves (comic look) and has to perfectly fit (as it's the case when using border-image*).

Is there any way to accomplish this? I also tried to solve the problem with border-image* properties, but this does not seem to work for scrollbars.

EDIT: Here is an example of the images. I don't know where to upload svg graphics for embedding.

EDIT 2: Added images. You can the the problem at the bottom of the scrollbar. The stretched, middle part, needs an offset of 15px from top and bottom.

Answer 1

Update your code like below:

 ::-webkit-scrollbar { width: 20px; } ::-webkit-scrollbar-track { background: url('https://svgshare.com/i/bqE.svg') right 2px center no-repeat; background-size: 10px 100%; width: 15px; } ::-webkit-scrollbar-thumb { background: url('https://svgshare.com/i/brF.svg') top, url('https://svgshare.com/i/bqv.svg') center, url('https://svgshare.com/i/brD.svg') bottom; background-repeat: no-repeat; background-size: 100% 15px,100% 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>