CSS滚动条宽度和圆角效果

Question

有没有一种方法可以设置带自动滚动条的div的默认滚动条宽度？我想将滚动条宽度设置为细线，并隐藏其顶部和底部箭头标记。

```

有没有办法设置带有自动滚动条的div的默认滚动条宽度？我想将滚动条宽度设置为细线，并隐藏其顶部和底部箭头标记。

```

- rushd

---

请添加一些代码 - HTML 和 CSS 就可以了，谢谢！ - Jack

请查看示例插件: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html - Ivan Ferrer

Answer 1

你可以使用CSS的WebKit功能：

你可以在这里了解相关内容。

例如：

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

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

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

会创建类似 iOS 的滚动条 (演示)

祝好运

- Jean-Paul

---

谢谢您的建议，但我需要包含其他内容才能使其工作吗？我已将关于CSS部分包含到我的CSS文件中，但滚动条没有改变。我的CSS部分如下：::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } - rushd

@rushd：嗯，你需要让其他元素响应它。请查看这个jsFiddle，我已经测试过并且可以正常工作。如果你看不到滚动条的变化，则表示你使用的浏览器太旧无法显示它。如果你能看到它：看看实现方式：这就是你应该实现的方式。祝你好运！ - Jean-Paul