0

I have an article's container div. I made custom scrollbar for it. But to offer a better user experience I want to expand the width of the scrollbar when hovering on the scrollbar. I have tried some CSS methods like using background-clip to make the border work --> How to change -webkit-scrollbar width when hover on it <-- but didn't work. Trying to do this with javascript, but maybe I am not doing it right. Please help me figure this out.

CSS

.articles-container::-webkit-scrollbar-track 
{
    margin-top: 900px;
    margin-bottom: 900px;
}
.articles-container::-webkit-scrollbar 
{
    width: 20px;        
}
.articles-container::-webkit-scrollbar-thumb 
{
    border-radius: 40px;
    background-color: rgba(112,112,112,0.3);
}
.articles-container::-webkit-scrollbar-thumb:vertical:hover
{
    background-color: rgba(112,112,112,0.5);
}
.articles-container.more-width::-webkit-scrollbar 
{
    width: 40px;        
}

JAVASCRIPT

   document.addEventListener("mousemove", function(e){
        let ele = document.getElementById('art-container-id');
        let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
        distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
   });

Is there any problem with .articles-container.more-width I tried putting an space like .articles-container .more-width but didn't work. How can I solve this any other approaches?

Soumya Roy
  • 265
  • 3
  • 11
  • IMHO, you can keep wrestling with styling native scroll bars, but it will be an endless battle. There are many differences across OS's and devices, and they change overtime. You'll see this when you test across devices (PC's, mac's, iphone's, Androids, etc) and browsers (Chrome, Safari, Firefox, Edge, etc.) – Kalnode Jan 31 '23 at 01:14
  • If you must have custom-styled scroll bars, then I highly recommend using a 3rd-party library to manage this, as they probably do it better. I recommend [simplebar](https://github.com/Grsmto/simplebar) to create custom scroll bars; I've used it in some special situations in production web apps. – Kalnode Jan 31 '23 at 01:16
  • You're right, there are too much variations going on from browsers to platforms. When you start thinking out of the box, some things just don't seem to work as expected. – Soumya Roy Jan 31 '23 at 02:14

0 Answers0