Highlight specific area on scrollbar - css

Question

I wondering if it possible, using CSS, to color a specific area on the scrollbar.
I know that the browser (Chrome in my case) doing it when you search for a query (Control+f) on a document. It looks like this:
Is this possible to add yellow lines like this on a requested position?
Thanks!

Answer 1

Very interesting question. I came up with this solution of literally placing a highlight div over the scroll bar. Let me know if this is something that works for you:
.container{
display: inline-flex;
position: relative;
}
.content {
width: 500px;
height: 600px;
overflow: auto;
}
.highlight {
width: 18px;
height: 3px;
background-color: red;
position: absolute;
right: 0px;
top: 100px;
z-index: 10;
}
.highlight1 {
width: 18px;
height: 3px;
background-color: red;
position: absolute;
right: 0px;
top: 200px;
z-index: 10;
}
.highlight2 {
width: 18px;
height: 3px;
background-color: red;
position: absolute;
right: 0px;
top: 250px;
z-index: 10;
}
<div class="container">
<div class="highlight"></div>
<div class="highlight1"></div>
<div class="highlight2"></div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Diam maecenas sed enim ut sem. Proin nibh nisl condimentum id. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Vestibulum lectus mauris ultrices eros in cursus. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Luctus accumsan tortor posuere ac ut consequat semper. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Duis ultricies lacus sed turpis tincidunt id aliquet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Id aliquet risus feugiat in ante metus. Vitae tempus quam pellentesque nec. Ullamcorper dignissim cras tincidunt lobortis feugiat. Nunc congue nisi vitae suscipit tellus. Semper risus in hendrerit gravida rutrum quisque. Turpis egestas pretium aenean pharetra magna ac. In arcu cursus euismod quis viverra.
Varius quam quisque id diam vel quam elementum pulvinar. Nulla malesuada pellentesque elit eget. Lobortis mattis aliquam faucibus purus in. Sed pulvinar proin gravida hendrerit. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Cursus euismod quis viverra nibh. Ipsum a arcu cursus vitae. Lacus vestibulum sed arcu non odio euismod lacinia at. Et tortor at risus viverra adipiscing. Faucibus purus in massa tempor nec. Non consectetur a erat nam at lectus urna duis. Hac habitasse platea dictumst quisque. Id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris cursus mattis molestie a iaculis at. In mollis nunc sed id semper risus. Dui sapien eget mi proin sed libero. At volutpat diam ut venenatis. Justo eget magna fermentum iaculis eu. Orci porta non pulvinar neque laoreet suspendisse. Ultricies leo integer malesuada nunc vel.
Elit ut aliquam purus sit amet luctus venenatis lectus. Turpis egestas sed tempus urna et pharetra pharetra massa. Eget dolor morbi non arcu. Nisl purus in mollis nunc sed id semper risus in. Pellentesque habitant morbi tristique senectus et netus. In hac habitasse platea dictumst vestibulum. Pellentesque nec nam aliquam sem et. Eros donec ac odio tempor orci dapibus ultrices. Ut enim blandit volutpat maecenas volutpat blandit. Parturient montes nascetur ridiculus mus mauris vitae. Rhoncus mattis rhoncus urna neque viverra justo nec.
Sed turpis tincidunt id aliquet risus feugiat in ante metus. Pulvinar mattis nunc sed blandit libero volutpat. Tortor at risus viverra adipiscing. Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Tortor at risus viverra adipiscing at in tellus integer feugiat. Felis donec et odio pellentesque diam volutpat commodo sed. Curabitur vitae nunc sed velit dignissim. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Pretium nibh ipsum consequat nisl vel pretium lectus. In fermentum et sollicitudin ac orci. Arcu odio ut sem nulla pharetra diam sit. Velit scelerisque in dictum non consectetur a erat nam at. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Arcu non sodales neque sodales ut etiam sit amet nisl. Risus nullam eget felis eget nunc. Nibh sit amet commodo nulla facilisi nullam. Maecenas accumsan lacus vel facilisis volutpat est velit. Sem nulla pharetra diam sit amet nisl. Praesent elementum facilisis leo vel fringilla est ullamcorper.
Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Maecenas ultricies mi eget mauris. Gravida cum sociis natoque penatibus. At risus viverra adipiscing at in. Sed arcu non odio euismod lacinia at quis. Sed viverra tellus in hac habitasse. Donec pretium vulputate sapien nec sagittis. Ornare quam viverra orci sagittis eu volutpat. Amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit. Sagittis purus sit amet volutpat.
Sem et tortor consequat id porta nibh venenatis cras sed. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio ut enim blandit volutpat. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit. Mi eget mauris pharetra et ultrices neque ornare aenean. Est sit amet facilisis magna etiam tempor. Tortor at auctor urna nunc. Vitae elementum curabitur vitae nunc sed. Egestas dui id ornare arcu odio ut. Urna nunc id cursus metus aliquam eleifend mi in. Amet justo donec enim diam vulputate ut. Habitant morbi tristique senectus et. Sed risus ultricies tristique nulla aliquet. Quis ipsum suspendisse ultrices gravida dictum. Sed augue lacus viverra vitae congue eu. Nec dui nunc mattis enim ut tellus. Sit amet purus gravida quis blandit turpis cursus in. Amet consectetur adipiscing elit duis tristique sollicitudin.
</div>
</div>