可用F12开发者工具查看元素及样式，可打开 codepen 在线编辑代码。
<html> <div class="parent"> parent <div class="child">children</div> </div> </html> <style> .parent { height: 200px; width: 200px; border: 2px solid #369; margin: 0 auto; overflow: scroll; padding: 20px; } .child { border: 2px solid orange; width: 300px; height: 300px; text-align: center; line-height: 300px; } /* 滚动条样式 */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { border-radius: 2px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #666; } ::-webkit-scrollbar-thumb:hover { background: #333; } ::-webkit-scrollbar-track { border-radius: 9px; background: #eee; } /* ::-webkit-scrollbar-button { background: #eee; } */ ::-webkit-scrollbar-corner { background-color: transparent; } ::-webkit-scrollbar:horizontal { width: 4px; } ::-webkit-scrollbar:vertical { width: 4px; } </style>
← CSS3之animation动画 「布局技巧」图片未加载前自动撑开元素高度→
CSS自定义设置滚动条样式
Jinuss's blog Jinuss's blog