巧妙隱藏網頁滾動條，提升用戶體驗
在網頁設計中，我們常常希望滾動條僅在用戶需要滾動頁面時才出現，以保持頁面簡潔美觀，提升用戶體驗。 如果你的滾動條顏色已自定義，但始終顯示，不妨嘗試以下方法。
假設你正在使用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偽類，我們實現了滾動條的動態顯示效果：鼠標懸停在頁面上時滾動條出現，鼠標離開時滾動條隱藏。 這種方法簡潔有效，能夠顯著提升用戶體驗。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
