別再使用el-scrollbar做捲軸啦！用simplebar-vue捲軸效能提升N倍！

水冗水孚發表於2022-12-15
Vue

問題描述

產品強者面色陰沉，手指螢幕，高聲喝道：此瀏覽器自帶的捲軸樣式不美觀，不可留也！須更換之！最好可自定義！

一時間，滿座開發...

平常工作中，有時候需要對瀏覽器的捲軸樣式做調整，此時解決方案一般有以下幾種方式：

  • 自己透過js手寫一個捲軸，不過效能不好，可能會出現奇怪的bug（不推薦）

  • 使用css的::webkit-scrollbar去修改捲軸樣式，不過這樣的話只在webkit核心的瀏覽器上生效，火狐瀏覽器上不生效（若能說服使用者只使用谷歌瀏覽器，倒是可以試試）

  • 使用UI元件庫中的捲軸元件，比如elementui中的el-scrollbar元件，不過大家也都知道el-scrollbar並沒有出現在官方元件文件中，原因是什麼呢？大家看一下el-scrollbar元件的原始碼，就會發現，這個元件是使用js去操作滾動距離，所以效能也並不是最優，原始碼目錄：node_modules/element-ui/package/scrollbars，簡要截圖：

  • 今天給大家推薦一款在vue中使用的捲軸元件，之所以好用主要體現在輕量級以及這個組價是用css搞一個捲軸，保留了原有的捲軸，所以效能非常不過，這個元件的名字叫做：simplebar-vue，當然也有react和angular版本的，大家可去github上看下。
vue版本的simplebar的github地址：https://github.com/Grsmto/sim...

使用simplebar-vue的效果圖

透過這個效果圖可以看到，可自定義捲軸的寬度高度以及顏色，使用步驟如下

使用步驟（以豎向捲軸為例）

第一步，下載simplebar-vue

npm install simplebar-vue --save

第二步，引入註冊

// 第二步，引入元件和樣式並註冊之
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";

components: { simplebar },

第三步，取消給捲軸容器設定overflow: auto;

如下：

.scrollBarWrap {
  width: 240px;
  height: 360px;
  border: 3px solid pink;
  /* 第三步，滾動的容器盒子，不能設定自動滾動，註釋掉 */
  /* overflow: auto; */
}

第四步，給捲軸容器加上標識data-simplebar

加上data-simplebar標明這個是捲軸的容器，以便於元件實現滾動效果

<div class="scrollBarWrap" data-simplebar>
    <!-- 滾動的內容 -->
    <h1 v-for="(item, index) in arr" :key="index">{{ item }}</h1>
</div>

第五步，使用元件標籤simplebar包裹住內容區即可

如下：

<div class="scrollBarWrap" data-simplebar>
    <!-- 包裹使用之 -->
    <simplebar>
        <h1 v-for="(item, index) in arr" :key="index">{{ item }}</h1>
    </simplebar>
</div>

第六步，想要修改樣式的話，覆蓋即可

如下：

/deep/ .simplebar-vertical {
    width: 16px;
  }
/deep/ .simplebar-scrollbar::before {
    background-color: green;
}

經過以上步驟，效果就出來了，為了方便大家的使用，筆者寫了兩個demo，分別是豎向捲軸和橫向捲軸，大家下載好外掛後，複製貼上在vue專案中就可以直接使用看效果了

完整程式碼

大家審查dom時，就會發現，捲軸用幾個dom搭配偽元素做的，效能很好的哦，當然實際上這個外掛還有其他略微強大的功能，大家可自行查閱github文件進行使用

豎向捲軸

<template>
  <!-- 第四步，給滾動容器dom上加上data-simplebar屬性做標記為滾動容器，data-simplebar-auto-hide="true"設定自動隱藏 -->
  <div class="box" data-simplebar data-simplebar-auto-hide="false">
    <!-- 第五步，用simplebar標籤包裹住滾動的內容 -->
    <simplebar>
      <h1 v-for="(item, index) in arr" :key="index">{{ item }}</h1>
    </simplebar>
  </div>
</template>

<script>
// 第一步，下載依賴
// 第二步，引入元件和樣式並註冊之
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";
export default {
  components: { simplebar },
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 240px;
  height: 360px;
  border: 3px solid pink;
  /* 第三步，滾動的容器盒子，不能設定自動滾動 */
  /* overflow: auto; */
  text-align: center;
  // 第六步，若想要修改顏色和捲軸寬度，覆蓋即可
  /deep/ .simplebar-vertical {
    width: 16px;
  }
  /deep/ .simplebar-scrollbar::before {
    background-color: green;
  }
}
</style>

橫向捲軸

<template>
  <!-- 第四步，給滾動容器dom上加上data-simplebar屬性做標記為滾動容器 -->
  <div class="box" data-simplebar>
    <!-- 第五步，用simplebar標籤包裹住滾動的內容 -->
    <simplebar>
      <!-- 筆者的dom都是h1標籤，為使之彈性盒橫向排列，所以又套了一層 -->
      <div class="itemWrap">
        <h1 class="item" v-for="(item, index) in arr" :key="index">
          {{ item }}
        </h1>
      </div>
    </simplebar>
  </div>
</template>

<script>
// 第一步，下載依賴
// 第二步，引入元件和樣式並註冊之
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";
export default {
  components: { simplebar },
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 360px;
  border: 2px solid pink;
  /* 第三步，滾動的容器盒子，不能設定自動滾動 */
  /* overflow: auto; */
  /* 加點樣式 */
  .itemWrap {
    display: flex;
    align-items: center;
    .item {
      height: 60px;
      line-height: 60px;
      margin: 0 12px;
    }
  }
  // 第六步，樣式修改覆蓋即可
  /deep/ .simplebar-scrollbar::before {
    background-color: red !important;
  }
}
</style>
最後還有一個更加強大的捲軸外掛，不過要稍微笨重一些，這個：https://github.com/KingSora/O...

產品強者審視結果，頗為滿意，撫須笑道：此子聰慧努力，可留，那，老夫再提三十個需求吧！

一時間，滿座開發...

相關文章