如何使用html和css在滚动条中添加图像？

Question

首先，请原谅我的英语水平，我是法国人，你知道我们的声誉:) 所以这是我的问题： 我正在尝试自定义滚动条，但对于图像我已经尝试了很多事情。 我不知道该怎么做，所以如果您有任何建议，请随时发送。 谢谢

Answer 1

对于这个问题，您需要使用

webkit scrollbar

css api。请注意，此 api 不适用于 Microsoft Edge 和 Firefox。欲了解更多信息，请访问此网址。以下是您的案例的示例：

.main {
  width: 250px;
  height: 300px;
  padding: 2px;
  overflow-y: scroll;
  border: 2.5px solid black;
}

p {
  margin: 0;
}

.main::-webkit-scrollbar { 
  /* this sets the width of the bar, in the div.main (::-webkit-scrollbar is fro the body/html)*/
  width: 20px; /* change for scrollbar width */
}

.main::-webkit-scrollbar-track { 
  /* scrollbar background */
  background-color: lightgray;
}

.main::-webkit-scrollbar-thumb {
  background-color: red; /* will leave after image loads */
  background-image: url("https://picsum.photos/100/400");
  background-size: cover;
}

.main::-webkit-scrollbar-thumb:hover {
  /* feel free to set this for when the mouse is over the bar */
}

<div class="main">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores
    quos, suscipit officiis, impedit sapiente unde modi quia voluptatibus, id
    cupiditate nesciunt. Officia, in animi distinctio commodi perspiciatis ad
    eligendi! Earum ab porro perferendis inventore, asperiores quaerat quis
    voluptate ducimus odio officia numquam nobis ipsum consectetur deleniti
    natus aspernatur, a temporibus illo culpa quia, similique iste quas sunt.
    Architecto, rerum. Qui, nostrum. Molestias, placeat maiores dignissimos id
    laboriosam eos error possimus voluptas ipsum aut rerum culpa nesciunt
    quaerat ipsam sapiente veniam exercitationem dolorum esse illo explicabo
    similique? Labore, ab aperiam. Blanditiis animi qui velit nobis fugit! Eius
    laborum necessitatibus aperiam sequi explicabo! Alias, neque. Ad veniam
    dolor, doloribus assumenda laboriosam vel necessitatibus minima dolorum fuga
    ipsa beatae quos, distinctio debitis? Voluptate, neque. Fugiat accusamus,
    excepturi, quam aliquid beatae consectetur laboriosam commodi nesciunt et
    dolor delectus illo perferendis sapiente ab voluptatem dicta quod! Laborum
    possimus sapiente repellat itaque ex facere recusandae?
  </p>
</div>