Webkit 滚动条宽度变化

Question

我试图通过 -webkit-scrollbar 属性更改滚动条的宽度，但 Chrome 拒绝它说它是一个未知属性。知道为什么吗？

Answer 1

在 Chrome 中表现良好 — http://jsfiddle.net/sergdenisov/wqr5zxpk/2/:

div {
    height: 200px;
    background: #f7f6f5;
    overflow-x: hidden;
    overflow-y: auto;
}

    div::-webkit-scrollbar {
        background: #fff;
        width: 15px;
        height: 15px; 
    }

    div::-webkit-scrollbar-thumb {
        background: #c5c5c5;
    }

Answer 2

.class::-webkit-scrollbar{ width :6px; } 以上对我有用。我只想在将 class "class" 添加到元素时应用宽度。

Answer 3

您可以更改水平和垂直滚动条的宽度

::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
  overflow-x: auto;
}

::-webkit-scrollbar
{
  width: 6px;
  height: 6px;
  background-color: #F5F5F5;
  overflow-x: auto;
}

::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #3c8dbc;
  overflow-x: auto;
}

Webkit 滚动条宽度变化

Webkit Scrollbar Width Change

css

webkit

scrollbar