如何实现自定义scrollbar hover时加宽？现有CSS/JS方案故障排查

问题描述 #

为文章容器div制作了自定义滚动条，希望鼠标hover到滚动条时增加其宽度。尝试过CSS方案无效，转而用JavaScript实现但存在问题，代码如下：

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');
});

疑问：.articles-container.more-width选择器是否存在问题？尝试改成.articles-container .more-width也无效，该如何解决？还有其他实现思路吗？

问题分析与解决方案 #

1. 选择器问题说明 #

.articles-container.more-width是正确的选择器，表示同时拥有articles-container和more-width类的元素；而.articles-container .more-width是后代选择器，匹配容器内的more-width类元素，显然不符合需求，改这个是错误的。

选择器本身没问题，问题出在JavaScript的鼠标位置判断逻辑和滚动条宽度变化后的容器尺寸波动：

• 原代码用offsetLeft + offsetWidth计算容器右边缘，但offsetWidth包含滚动条宽度，当滚动条宽度变化时，这个值会跟着改变，导致距离判断出错，出现类添加/移除的循环闪烁。
• 距离范围设置为15，和滚动条初始宽度20px不匹配，可能导致鼠标hover到滚动条上时无法触发类添加。

2. 修正后的JavaScript实现 #

改用getBoundingClientRect()获取容器的视口位置，精准判断鼠标是否在滚动条区域内：

document.addEventListener("mousemove", function(e) {
    const ele = document.getElementById('art-container-id');
    if (!ele) return;
    
    const rect = ele.getBoundingClientRect();
    // 计算当前滚动条的实际宽度
    const currentScrollbarWidth = parseInt(getComputedStyle(ele).width) - ele.clientWidth;
    // 鼠标在容器内的X坐标
    const mouseXInContainer = e.clientX - rect.left;
    // 判断鼠标是否处于滚动条区域
    const isOverScrollbar = mouseXInContainer >= ele.clientWidth && mouseXInContainer <= ele.clientWidth + currentScrollbarWidth;

    isOverScrollbar ? ele.classList.add('more-width') : ele.classList.remove('more-width');
});

3. 优化CSS（可选） #

用CSS变量统一管理滚动条宽度，维护更方便：

.articles-container {
    --scrollbar-width: 20px;
}

.articles-container::-webkit-scrollbar-track 
{
    margin-top: 900px;
    margin-bottom: 900px;
}
.articles-container::-webkit-scrollbar 
{
    width: var(--scrollbar-width);        
}
.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 {
    --scrollbar-width: 40px;
}

4. 其他实现思路 #

• 模拟滚动条方案：隐藏原生滚动条，用自定义div模拟滚动条，监听这个div的mouseover/mouseout事件动态调整原生滚动条宽度（需同步模拟滚动条的位置和原生滚动条的滚动状态，实现较复杂）。
• 容器hover触发（简化版）：如果允许鼠标hover整个容器时加宽滚动条，可直接用CSS实现，无需JS：

.articles-container:hover::-webkit-scrollbar {
    width: 40px;
}

内容的提问来源于stack exchange，提问作者Soumya Roy