前端 - 如何让网页的滚动条只在滚动的时候才显示出来？

Question

我修改了滚动条的颜色，但是修改后它就变成常驻的了，我希望它和之前一样，只在滚动的时候才显示出来。

下面是我的代码：

import { Component } from 'react';import styles from './style.less';export default class DraftPage extends Component {  render() {    return (      <div className={styles.container}>        DraftPage        <div style={{ height: '5000px', width: '1px', backgroundColor: 'red' }}>          hehh        </div>      </div>    );  }}

.container {  overflow: auto;}body::-webkit-scrollbar {  width: 6px;}body::-webkit-scrollbar-thumb {  background-color: red;}

我该如何修改？

Answer 1

要使滚动条只在滚动时显示，你需要使用 CSS 的 scrollbar-width 属性。这个属性可以设置滚动条的宽度，并且它有一个 auto 值，可以让滚动条只在需要时显示。

你可以这样修改你的 CSS：

.container {  overflow: auto;  scrollbar-width: auto; /* 添加这一行 */}body::-webkit-scrollbar {  width: 6px;}body::-webkit-scrollbar-thumb {  background-color: red;}

这段代码会使滚动条只在 .container 元素需要滚动时显示。注意，这个属性可能不会在所有浏览器中都有效，因为不是所有的浏览器都支持这个属性。