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

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

body::-webkit-scrollbar {
  width: 6px;
  display: none;
}
body:hover::-webkit-scrollbar{
    display: block;
}

Answer 2

可以用 overflow: overlay;