How to mark browser scroll bar?

user_3929188 0
Viewed 1055

I want to mark the browser scroll bar like chrome does in Control + F with only html css and js.

enter image description here

I have tried

  1. put div with css position fixed
  2. creating linear gradient style to scrollbar track

but i have lost my way in both attempts. Any ideas?

css html javascript
2 Answers

Browsers provide no API that allows JavaScript embedded in a webpage to do this.

The closest you could come would be to set overflow: hidden on the html element and then build your own scrollbar from scratch. You'd need to account for all the normal UI interactions that would cause the page to scroll (such as searching to a specific point, pressing the spacebar or down arrow, interacting with a screen reader, etc. etc) so it would be unlikely that you would pull this off without introducing serious accessibility and UX issues.

Dorward_190680

You could try to make a div and give it the exact size of the window and so hide the default scrollbar. Add inside the div second a div with scrollbar (using CSS overflow) and another div with position absolute or something like that, this div with position absolute and z-index should sit on top of the scrollbar (of the div you added) and have same size. When user interacts with the page you can populate the absolute position div with whatever you want the user to see on top of the scroll bar. From CSS you can set color, opacity etc. With js you can add on search custom ids to the words found, get their position in the page and calculate the position of those bars you want to see on top of scrollbar.

user_116246030
Related