巧妙隐藏网页滚动条，提升用户体验
在网页设计中，我们常常希望滚动条仅在用户需要滚动页面时才出现，以保持页面简洁美观，提升用户体验。 如果你的滚动条颜色已自定义，但始终显示，不妨尝试以下方法。
假设你正在使用React框架，并已设置了基本的滚动条样式：
import React, { Component } from 'react';
import styles from './style.less';
export default class DraftPage extends Component {
render() {
return (
<div className={styles.container}>
DraftPage Content
<div style={{ backgroundColor: 'lightgray', height: '1000px', width: '100%' }}>
More Content
</div>
</div>
);
}
}
以及对应的CSS样式：
.container {
overflow: auto;
}
body::-webkit-scrollbar {
width: 6px;
/* 原样式 */
}
body::-webkit-scrollbar-thumb {
background-color: red;
/* 原样式 */
}
为了实现滚动条的动态显示，只需修改CSS样式如下：
body::-webkit-scrollbar {
width: 6px;
display: none; /* 默认隐藏 */
}
body:hover::-webkit-scrollbar {
display: block; /* 鼠标悬停时显示 */
}
通过display: none和:hover伪类，我们实现了滚动条的动态显示效果：鼠标悬停在页面上时滚动条出现，鼠标离开时滚动条隐藏。 这种方法简洁有效，能够显著提升用户体验。
