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.
JavaScript
x
20
20
1
*::-webkit-scrollbar-thumb:hover {2
background-color: blue;3
border: 1px;4
width: 15px;5
}6
7
*::-webkit-scrollbar:hover {8
9
width: 15px;10
}11
12
13
14
15
16
*:hover::-webkit-scrollbar {17
width: 10px;18
19
}20
below is my code
.html
JavaScript
1
31
31
1
<html>2
<head>3
<meta charset="UTF-8" />4
<script src="script.js"></script>5
<link rel="stylesheet" type="text/css" href="styles.css" />6
</head>7
<body>8
<div class="table">9
Hello<br />10
Hello<br />11
Hello<br />12
Hello<br />13
Hello<br />14
Hello<br />15
Hello<br />16
Hello<br />17
Hello<br />18
Hello<br />19
Hello<br />20
Hello<br />21
Hello<br />22
Hello<br />23
Hello<br />24
Hello<br />25
Hello<br />26
Hello<br />27
Hello<br />28
</div>29
</body>30
</html>31
css code :
JavaScript
1
33
33
1
*::-webkit-scrollbar {2
width: 5px;3
border: 1px;4
}5
6
*::-webkit-scrollbar-track {7
background: #ebf0f5;8
}9
10
*::-webkit-scrollbar-thumb {11
background-color: black;12
border: 1px;13
}14
15
*::-webkit-scrollbar-thumb:hover {16
width: 15px;17
}18
19
.table {20
position: relative;21
left: 150px;22
top: 150px;23
width: 200px;24
max-height: 200px;25
background-color: rgba(255, 0, 0, 0.55);26
overflow: hidden;27
}28
29
.table:hover {30
overflow-y: auto;31
scroll-behavior: smooth;32
}33
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:-
JavaScript
1
5
1
document.addEventListener("mousemove", function(e){2
let ele = document.getElementById('element');3
let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;4
distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');5
});JavaScript
1
19
19
1
#element {2
position: relative;3
left: 150px;4
top: 150px;5
width: 200px;6
max-height: 200px;7
background-color: rgba(255, 0, 0, 0.55);8
overflow: auto;9
}10
#element::-webkit-scrollbar-thumb {11
background: #888;12
}13
#element::-webkit-scrollbar {14
width: 5px;15
}16
#element.more-width::-webkit-scrollbar {17
width: 20px;18
}19
JavaScript
1
21
21
1
<div id="element">2
Hello<br>3
Hello<br>4
Hello<br>5
Hello<br>6
Hello<br>7
Hello<br>8
Hello<br>9
Hello<br>10
Hello<br>11
Hello<br>12
Hello<br>13
Hello<br>14
Hello<br>15
Hello<br>16
Hello<br>17
Hello<br>18
Hello<br>19
Hello<br>20
Hello<br>21
</div>