Webkit滚动条宽度改变

Question

我想通过 -webkit-scrollbar 属性来改变滚动条的宽度，但是 Chrome 报错称这是一种未知属性。你有什么想法吗？

- Anum Malik

---

你找到答案了吗？ - sergdenisov

我想要在元素添加“class”类时应用宽度。翻译后的代码如下：.class::-webkit-scrollbar{width:6px;} - Anum Malik

完成了！谢谢Sergey。 - Anum Malik

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

- sergdenisov

---

当滚动条宽度无法工作时，这个解决方案对我来说是有效的，尽管滚动背景不起作用。 - Moaz Ateeq

Answer 2

.class::-webkit-scrollbar{ width :6px; } 以上代码对我有效。当类“class”被添加到元素时，我希望仅应用宽度。

- Anum Malik

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

- J.Pansaniya