3

I use custom scrollbars on my site, and I was wondering if it's possible to have the background image of the body behind my scrollbar, as it works well with textarea.

Edit: I want the scrollbar to be still usable with the cursor.

textarea {
  background-repeat: repeat;
  background-image: url(https://barrycap.com/assets/bg/home.svg);
  width: 200px;
  height: 150px;
  resize: none;
  scrollbar-color: #888f #fff0;
}
body {
  background-color: #222;
  background-repeat: repeat;
  background-image: url(https://barrycap.com/assets/bg/random.svg);
  width: 200px;
  height: 150px;
  resize: none;
  scrollbar-color: #888f #0000;
}
<html>
  <body>
    <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
    <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
  </body>
</html>

I didn't saw it in the first place, but the scrollbar colors don't work on Chrome (I posted my question on Firefox). I've got another method for my site on Chrome.

Here is a screenshot of the snippet in Firefox: screenshot

Edit: The question has been answered for Chrome by @HereticMonkey. But the transparent scrollbar track for the body doesn't work in Firefox.

I changed the background color and background image of the body to make the issue an evidence.

BarryCap
  • 326
  • 3
  • 11
  • Use `overflow: hidden` to hide scrollbars. – C Rishi May 18 '21 at 09:27
  • I don't want to hide scrollbars, I just want the background to be visible behind the scrollbar. – BarryCap May 18 '21 at 09:36
  • Then I guess this post will help you out [How to make scrollbar invisible](https://stackoverflow.com/questions/37298627/how-to-make-scrollbar-invisible-transparent/37300691) – C Rishi May 18 '21 at 09:38
  • 2
    @CRishi he doesnt want to make scroll bar invisible, he wants to put an image behind the scroll bar that is visible – I_love_vegetables May 18 '21 at 10:06
  • There are a number of questions about the scrollbar. [Make Scrollbar track transparent](https://stackoverflow.com/q/50837011/215552), [Transparent scrollbar with css](https://stackoverflow.com/q/23200639/215552) – Heretic Monkey May 18 '21 at 10:47
  • 1
    Does this answer your question? [Transparent scrollbar with css](https://stackoverflow.com/questions/23200639/transparent-scrollbar-with-css) – Heretic Monkey May 19 '21 at 00:17
  • @Heretic Monkey Partly, because it works great in Chrome, but not at all in Firefox, as it uses `webkit` and not `scrollbar-color`. But thanks anyway! – BarryCap May 19 '21 at 06:41

1 Answers1

0

Add this CSS:

::-webkit-scrollbar {
  width: 10px;
}
    
::-webkit-scrollbar-track {
  background-color:transparent;
}
    
::-webkit-scrollbar-track:hover {
  background-color: #eaeaea;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
}
BarryCap
  • 326
  • 3
  • 11
Sandeep K Goyal
  • 280
  • 2
  • 9