<el-scrollbar></el-scrollbar>

用的時(shí)候加個(gè)高度就行了

不喜歡用這個(gè)用下面這個(gè)? ? ?在一個(gè)博客看到的還不錯(cuò)!

?

先張貼一張效果圖：

說明：這里會(huì)出現(xiàn)橫向滾動(dòng)條，是因?yàn)槟J(rèn)是開啟橫向滾動(dòng)條的，并且內(nèi)容區(qū)域高度超出了外層盒子的寬度

?

下面介紹使用方法：

1、安裝vue-happy-scroll

推薦使用npm安裝，這樣可以跟隨你的webpack配置去選擇怎樣打包

npm install vue-happy-scroll --save-dev

當(dāng)然，你也可以選擇使用script標(biāo)簽的方式引入

<!-- 引入css，該鏈接始終為最新版的資源 --> <link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css"> <!-- 引入vue --> <!-- 引入組件，該鏈接始終為最新版的資源 --> <script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>

?

2、注冊(cè)組件

在main.js文件中編寫一下代碼段：

import Vue from 'vue' import { HappyScroll } from 'vue-happy-scroll' //自定義組件名 Vue.component('happy-scroll', HappyScroll) // 引入css import 'vue-happy-scroll/docs/happy-scroll.css'

?

3、vue組件中使用

?在這里就以我的小項(xiàng)目為例，在dashboard.vue文件中寫入如下代碼，使用happy-scrool標(biāo)簽就可以使用滾動(dòng)條了

<template><div><h3>儀表盤</h3><!-- 外層盒子 --><div style="height:200px;width:300px;background-color:#ccc;"><!-- 這里的標(biāo)簽名稱要和main.js文件中定義的組件名稱保持一致 --><happy-scroll color="rgba(0,0,0,0.5)" size="5"><!-- 內(nèi)層盒子——內(nèi)容區(qū) --><div class="con"><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p><p>士大夫撒入個(gè)任務(wù)二個(gè)人合同不大廢物個(gè)人都怕順風(fēng)耳個(gè)二級(jí)gap所愛速發(fā)sure歐若爾奧沙是否</p></div></happy-scroll></div></div> </template>

?

由于在這里，沒有針對(duì)class為con的div標(biāo)簽單獨(dú)設(shè)置寬度，所以默認(rèn)寬度就是和外層盒子寬度一樣，所以就不會(huì)出現(xiàn)橫向滾動(dòng)條了（當(dāng)然如果當(dāng)內(nèi)部盒子寬度超出外層盒子，就會(huì)出現(xiàn)橫向滾動(dòng)條了），效果圖如下：

?

4、常用屬性說明

該插件可以配置常用的滾動(dòng)條顏色、粗細(xì)、豎向滾動(dòng)條是左還是右邊顯示、橫向滾動(dòng)條是上還是下邊顯示、滾動(dòng)條是否開啟監(jiān)聽容器大小變化等屬性。

在這里我只寫兩個(gè)我可能最常用的屬性:顏色、大小。

4.1、滾動(dòng)條顏色：color屬性

設(shè)置滾動(dòng)條顏色的屬性為color，直接在標(biāo)簽上添加即可，在上面代碼中，我已經(jīng)添加了color屬性的值為半透明的黑色滾動(dòng)條（rgba(0,0,0,0.5)），也可以使用顏色單詞，

例如<happy-scroll color="red">

?

4.2、滾動(dòng)條粗細(xì)：size屬性

設(shè)置滾動(dòng)條粗細(xì)尺寸的屬性為size，直接在標(biāo)簽上添加即可，其中默認(rèn)值是4，例如當(dāng)我設(shè)置size="10"的時(shí)候，

<happy-scroll color="red" size="10">

?

4.3、是否開啟監(jiān)聽容器大小變化：resize屬性

開啟監(jiān)聽容器大小變化的屬性名為resize，直接在標(biāo)簽上添加即可，<happy-scroll?color="red"?size="10"?resize> ，這樣，當(dāng)你因?yàn)辄c(diǎn)擊頁(yè)面操作時(shí)，如果內(nèi)容區(qū)的寬高變化了，滾動(dòng)條的長(zhǎng)短也會(huì)相應(yīng)的變化（happy-scroll標(biāo)簽內(nèi)的第一層標(biāo)簽開始就是內(nèi)容區(qū)，這里是class為con的div）

例如：假設(shè)點(diǎn)擊頁(yè)碼某一個(gè)地方后，div.con的高度變成了2000px：

?

<happy-scroll color="red" size="5" resize><div class="con" style="height:2000px;">

則滾動(dòng)條效果為如圖：

?

?還有其他更多屬性，這里就不再一一介紹說明，需要了解更詳細(xì)的內(nèi)容，可以參考該插件的開發(fā)者的github地址：https://github.com/happy-js/vue-happy-scroll

總結(jié)

以上是生活随笔為你收集整理的element ui 滚动条插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。