如何使用JS更改滚动条的形状

Question

我很困惑其他前端开发人员如何才能改变网页的滚动条形状以使其外观更好 如何使用JS做到这一点？

Answer 1

W3Schools

从他们的示例：

<style>
/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
}
</style>

Answer 2

您是否需要使用JavaScript来实现此目标？

这可以使用CSS非常简单地实现：

body::-webkit-scrollbar {
    width: 3em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 2px solid blue;
}