Hi I am having issue with my custom scroll
requirement : when ever user hovers on to a div then only scroll bar has to be shown and when user hover’s on scroll bar then the scroll bar width has to increase from 5px to 15px.
what i did : i created custom scroll bar and implemented hover on div and but im facing issue when user hover on scrollbar i unable to increase it size.
*::-webkit-scrollbar-thumb:hover { background-color: blue; border: 1px; width: 15px; } *::-webkit-scrollbar:hover { width: 15px; } *:hover::-webkit-scrollbar { width: 10px; }
below is my code
.html
<html> <head> <meta charset="UTF-8" /> <script src="script.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="table"> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> </div> </body> </html>
css code :
*::-webkit-scrollbar { width: 5px; border: 1px; } *::-webkit-scrollbar-track { background: #ebf0f5; } *::-webkit-scrollbar-thumb { background-color: black; border: 1px; } *::-webkit-scrollbar-thumb:hover { width: 15px; } .table { position: relative; left: 150px; top: 150px; width: 200px; max-height: 200px; background-color: rgba(255, 0, 0, 0.55); overflow: hidden; } .table:hover { overflow-y: auto; scroll-behavior: smooth; }
app url : https://stackblitz.com/edit/web-platform-9mbus1?file=styles.css
instead of increased width and applying color it is just applying color
Advertisement
Answer
Try This:-
document.addEventListener("mousemove", function(e){ let ele = document.getElementById('element'); let distance = ele.offsetLeft + ele.offsetWidth - e.pageX; distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width'); });
#element { position: relative; left: 150px; top: 150px; width: 200px; max-height: 200px; background-color: rgba(255, 0, 0, 0.55); overflow: auto; } #element::-webkit-scrollbar-thumb { background: #888; } #element::-webkit-scrollbar { width: 5px; } #element.more-width::-webkit-scrollbar { width: 20px; }
<div id="element"> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> </div>