記一次滾動條隱藏

weixin_34249678發表於2018-12-24

1.使用CSS滾動條選擇器

你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動條樣式:

  • ::-webkit-scrollbar — 整個滾動條.
  • ::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
  • ::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
  • ::-webkit-scrollbar-track — 滾動條軌道.
  • ::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
  • ::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).

例子：

/* css */

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
}

<!-- HTML -->
<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?</div>

文件地址

方法2 容器巢狀

首先滾動條的寬度是17px;
大致原理就是在產生滾動條的容器 的 外層再巢狀一層，寬度比他小17px，然後overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .outer-container {
      overflow-x: hidden;
      width: 100px;
    }

    .inner-container {
      width: 117px;
      height: 100px;
      overflow-y: scroll;
    }

    .content {
      height: 1000px;
    }
  </style>
</head>
<body>
  <div class="outer-container">
    <div class="inner-container">
      <div class="content">
        ......
      </div>
    </div>
  </div>
</body>
</html>

也可以使用position: relative; 和 position: absolute

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .outer-container {
      width: 100px;
      height: 100px;
      position: relative;
      overflow: hidden;
    }

    .inner-container {
      position: absolute;
      left: 0;
      top: 0;
      right: -17px;
      bottom: 0;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .content {
      height: 2000px;
    }
  </style>
</head>
<body>
  <div class="outer-container">
    <div class="inner-container">
      <div class="content">
        ......
      </div>
    </div>
  </div>
</body>
</html>

使用負margin來實現

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .outer-container {
      height: 100px;
      overflow: hidden;
    }

    .inner-container {
      margin-right: -17px;
      margin-bottom: -17px;
      height: 100%;
      overflow-y: scroll;
      overflow-x: auto;
    }
    .content {
      height: 2000px;
    }
  </style>
</head>
<body>
  <div class="outer-container">
    <div class="inner-container">
      <div class="content">
        ......
      </div>
    </div>
  </div>
</body>
</html>

相關文章