Question

是否可以使用javascript编辑自定义滚动条？

这是我的自定义滚动栏：

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 1px 1px 6px 1px grey; 
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: yellow; 
    -webkit-box-shadow: inset 1px 1px 6px 1px rgba(0, 0, 0, 0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #000000;
}

像这样更改滚动条（不起作用）：

jQuery('::-webkit-scrollbar').css('width', '120px');
jQuery('::-webkit-scrollbar-thumb').css('background', 'orange');

或

document.body.scrollbar.style.width = '120px';
document.body.scrollbar.thumb.style.background = 'orange';

如何做到这一点？谢谢。

Answer 1

经过数小时的研究，我发现用javascript编辑浏览器的默认滚动条是不可能的。

我发现唯一可行的解决方案是使用jScrollPane和jQuery的.hover()功能来编辑自定义html滚动条。

您还可以将CSS应用于自定义html滚动条，使其类似于浏览器的defalt滚动条+ javascript编辑。

可以找到here的一个例子。

使用JavaScript编辑自定义滚动条？

1 个答案: