1、緣起

之前在做項目時，發(fā)現(xiàn)一個項目中，各個子應(yīng)用項目的UI表現(xiàn)不一致，看了下式Vue項目滾動條和其他的子應(yīng)用項目表現(xiàn)明顯不一致。

有時候為了使界面滾動條，各個瀏覽器的滾動條能保持一致，這樣我們的項目避免在各個瀏覽器存在差異導(dǎo)致UI界面的不一致，這時候我們就可以考慮使用通用組件的方式，對各個需要滾動的頁面，或者彈出窗口添加統(tǒng)一的組件進(jìn)行包裹，來保證滾動效果在各個瀏覽器中能有更好的體驗效果。

2、實際示例

我們以element-ui官網(wǎng)為例，看下默認(rèn)滾動條實際效果。

在firefox 瀏覽器中，如下所示：

在Chrome 瀏覽器中，如下所示：                                                                             

在Edge瀏覽器中，如下所示： 

在以上各個瀏覽器中展示的效果來說，默認(rèn)滾動條在各個瀏覽器中的表現(xiàn)都不一致，firefox瀏覽器和chrome瀏覽器相差就比較小，而與Edge瀏覽器相比相差就比較大了。

我們以element-ui官網(wǎng)為例，看下添加通用組件之后，滾動條實際效果。

在firefox 瀏覽器中，如下所示：

在chrome瀏覽器中，如下所示：

在Edge瀏覽器中，如下所示： 

 最后我們看到各個瀏覽器中滾動條的效果，基本上各個瀏覽器的表現(xiàn)效果是一致的，添加通用組件，默認(rèn)情況下滾動條是不顯示的，只有鼠標(biāo)移動過去才會進(jìn)行顯示，整體上效果和用戶體驗會更好。

3、美化滾動條

我們打開這個網(wǎng)址（Create a New Pen (codepen.io)）進(jìn)行示例代碼的編寫。

我們對HTML 稍微改變以下，看下Dialog。

<script src="http://unpkg.com/vue@2/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<div id="app">
  <el-button type="text" @click="dialogVisible = true">點擊打開 Dialog</el-button>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <el-scrollbar class="test">
      <div>這是一段信息</div>
      <div>這是一段信息</div>
      <div>這是一段信息</div>
      <div>這是一段信息</div>
      <div>這是一段信息</div>
      <div>這是一段信息</div>
      <div>這是一段信息</div>
      <div>這是一段信息</div>
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
    </span>
  </el-dialog>
</div>
<style>
  .test {
    height: 100px;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
</style>

我們看下效果： 

我們可以看到垂直滾動條的樣式已經(jīng)發(fā)生變化了，我們引用了element-ui的組件<el-scrollbar></el-scrollbar>這個組件對超過高度的內(nèi)容進(jìn)行了包裹。

在element-ui（2.xx.xx）官網(wǎng)上，并沒有找到有這個組件，實際上是有的，沒有給出對應(yīng)組件對應(yīng)的文檔，可能組件在設(shè)計的時候沒有更好的完善吧。下載對應(yīng)源碼，看到是有這個組件的。

打開對應(yīng)主文件，傳遞的屬性有幾個： 

 props: {
    native: Boolean, // 是否使用原生方式
    wrapStyle: {},  // 包裹容器的自定義樣式
    wrapClass: {},  // 包裹容器的自定義類名
    viewClass: {},  // 視圖的自定義樣式
    viewStyle: {},  // 視圖的自定義類名
    noresize: Boolean, // 如果 container 尺寸不會發(fā)生變化，最好設(shè)置它可以優(yōu)化性能
    tag: {              // 視圖的元素標(biāo)簽，默認(rèn)為 div 標(biāo)簽
      type: String,
      default: 'div'
    }
  },

在源碼頂部，看到有一個鏈接地址，是參考另一個插件的實現(xiàn)，如下所示

reference

打開它對應(yīng)的網(wǎng)站（https://noeldelgado.github.io/gemini-scrollbar/）,我們可以看到官網(wǎng)本身也進(jìn)行了對應(yīng)實現(xiàn)。

開發(fā)chrome開發(fā)工具，在元素標(biāo)簽頁中,我們可以看到通過自定義節(jié)點，然后給節(jié)點添加對應(yīng)的事件去進(jìn)行實現(xiàn)的。

4、Element-plus中的滾動條

我們Element-plus 的官網(wǎng)，發(fā)現(xiàn)有滾動條組件對應(yīng)的說明文檔，如下所示：

 通過文檔給定的屬性，發(fā)現(xiàn)和element-ui中的滾動條類型，只不過增加了寬、高等部分屬性，使用起來和element-ui的滾動條沒什么太大區(qū)別。

我們看一下如下示例：

<template>
  <el-scrollbar height="400px">
    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
  </el-scrollbar>
</template>
<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

 效果如下所示：

5、關(guān)于實現(xiàn)方式的思考

 首先，我們檢查滾動條的大小， 如果滾動條大小等于零（這意味著當(dāng)前區(qū)域不需要滾動條） 那么我們什么都不做，否則我們“隱藏”本機(jī)滾動條（保留其功能 完整），并創(chuàng)建一對新的“滾動條”，由div組成，您可以完全自定義 用CSS這些“滾動條”將更新其位置，而 滾動以獲得視覺反饋，如果您單擊或拖動它們，也會做出響應(yīng)。

例如，我們可以創(chuàng)建如下節(jié)點添加到html中。

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

滾動條寬度，我們可以動態(tài)進(jìn)行計算。

// Create the measurement nodevar scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar widthvar scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac:  15
// Delete the DIV 
document.body.removeChild(scrollDiv);

使用頁面中的元素，從clientWidth中減去offsetWidth即可得到滾動條的大??！ 最后一步是從DOM中刪除DIV，完成了！

實際上很多其他組件的實現(xiàn)，基本上都是基于這樣的方式去進(jìn)行實現(xiàn)的。

到此這篇關(guān)于Element-ui 滾動條美化的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element-ui 滾動條 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論