0
339
ViewsHow to increase width of the scroll bar when user hover's on it
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
3 answers
Answer question0
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>0
You didn't set it to 15px in the first place.
*::-webkit-scrollbar-thumb:hover {
background-color: blue;
border: 1px;
width: 15px;
}
0
The ::-webkit-scrollbar element is non-standard (Not compatible with Firefox).
In any case it looks like it can't be done with CSS alone.
Consequently you may be better off looking at a re-write.
Found a possible approach here as well as a blog and a github-link to (hopefully) compensate for not including the code inline!