chrome浏览器中div出现滚动条但不能用鼠标滚动

在 CSS 中，可以通过伪元素选择器来定制 `div` 元素滚动条的样式。需要注意的是，这些样式仅在支持 `::-webkit-scrollbar` 的浏览器（如 Chrome、Safari 和 Edge）中生效。对于其他浏览器，滚动条样式将保持默认。 以下是如何调整 `div` 元素滚动条样式的详细方法： ### 自定义滚动条整体样式 可以通过 `::-webkit-scrollbar` 伪元素来定义滚动条的整体宽度或高度。 ```css div::-webkit-scrollbar { width: 12px; /* 垂直滚动条的宽度 */ height: 12px; /* 水平滚动条的高度 */ } ``` ### 设置滚动条轨道的样式 使用 `::-webkit-scrollbar-track` 伪元素来定义滚动条轨道的外观。 ```css div::-webkit-scrollbar-track { background: #f1f1f1; /* 轨道背景颜色 */ border-radius: 10px; /* 轨道圆角 */ } ``` ### 设置滚动条滑块的样式 通过 `::-webkit-scrollbar-thumb` 伪元素来设置滚动条滑块的样式，例如背景颜色和圆角。 ```css div::-webkit-scrollbar-thumb { background: #888; /* 滑块的背景颜色 */ border-radius: 10px; /* 滑块的圆角 */ } div::-webkit-scrollbar-thumb:hover { background: #555; /* 鼠标悬停时的滑块颜色 */ } ``` ### 完整示例 以下是一个完整的 CSS 示例，展示了如何自定义 `div` 的滚动条样式： ```css .demo { height: 300px; overflow: auto; border: 2px dashed #349EDC; padding: 10px; } .demo::-webkit-scrollbar { width: 3px; } .demo::-webkit-scrollbar-track { background-color: #ccc; } .demo::-webkit-scrollbar-thumb { background-color: #349EDC; border-radius: 10px; } ``` ### 注意事项 - **浏览器兼容性**：`::-webkit-scrollbar` 仅适用于基于 WebKit 的浏览器（如 Chrome 和 Safari）。Firefox 和 Internet Explorer 不支持此功能。 - **用户体验**：虽然自定义滚动条可以提升视觉体验，但应确保样式不会影响用户的操作体验。