不滾動時隱藏自定義滾動條

時間 2019-11-11

標籤滾動隱藏自定義滾動條简体版

原文原文鏈接

如今部分瀏覽器已支持自定義滾動條，成了設計師和完美主義者的救星。

新版上線後，設計師又提了個新需求： 把導航欄右側的滾動條，在不滾動時隱藏掉（同時還發了個小視頻表示效果）。就是下圖中右側的粗線：

在mac系統下測試了Chrome／Safari／Firefox瀏覽器，發現這些系統在默認狀況下，不滾動時滾動條是隱藏的。以下圖

原來是自定義滾動條屏蔽了系統的這一特性。html

解決方案：

將外包裹層默認設置爲overflow-y: hidden; 同時設置hover效果時overflow: auto;

以下：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
  .content{
    width: 200px;
    height: 150px;
    padding-left: 10px;
    border: 1px solid #ccc;
    overflow-y: hidden;
  }
  .content:hover{
    overflow-y: auto;
  }
  .scrollbar::-webkit-scrollbar {
    width: 2px;
  }

  .scrollbar::-webkit-scrollbar-track-piece {
    background-color: #fff;
  } /* 滾動條的內層滑軌背景顏色 */

  .scrollbar::-webkit-scrollbar-track {
    background-color: #fff;
  } /* 滾動條的外層滑軌背景顏色 */

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #d4d8e2;
  } /* 滾動條的內層滑塊顏色 */

  .scrollbar::-webkit-scrollbar-button {
    background-color: #fff;
    display: none;
  } /* 滑軌兩頭的監聽按鈕顏色 */
  </style>
</head>
<body>
  <div class="content scrollbar">
    <p>內容1</p>
    <p>內容2</p>
    <p>內容3</p>
    <p>內容4</p>
    <p>內容5</p>
    <p>內容6</p>
    <p>內容7</p>
  </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。