1、緣起

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

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

2、實(shí)際示例

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

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

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

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

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

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

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

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

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

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

3、美化滾動(dòng)條

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

我們對(duì)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">點(diǎn)擊打開(kāi) 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>

我們看下效果： 

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

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

打開(kāi)對(duì)應(yīng)主文件，傳遞的屬性有幾個(gè)： 

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

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

reference

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

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

4、Element-plus中的滾動(dòng)條

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

 通過(guò)文檔給定的屬性，發(fā)現(xiàn)和element-ui中的滾動(dòng)條類(lèi)型，只不過(guò)增加了寬、高等部分屬性，使用起來(lái)和element-ui的滾動(dòng)條沒(méi)什么太大區(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)于實(shí)現(xiàn)方式的思考

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

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

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

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

// 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);

使用頁(yè)面中的元素，從clientWidth中減去offsetWidth即可得到滾動(dòng)條的大小！ 最后一步是從DOM中刪除DIV，完成了！

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

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

最新評(píng)論