<el-scrollbar></el-scrollbar>

用的時候加個高度就行了

不喜歡用這個用下面這個? ? ?在一個博客看到的還不錯!

?

先張貼一張效果圖：

說明：這里會出現橫向滾動條，是因為默認是開啟橫向滾動條的，并且內容區域高度超出了外層盒子的寬度

?

下面介紹使用方法：

1、安裝vue-happy-scroll

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

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

當然，你也可以選擇使用script標簽的方式引入

<!-- 引入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、注冊組件

在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組件中使用

?在這里就以我的小項目為例，在dashboard.vue文件中寫入如下代碼，使用happy-scrool標簽就可以使用滾動條了

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

?

由于在這里，沒有針對class為con的div標簽單獨設置寬度，所以默認寬度就是和外層盒子寬度一樣，所以就不會出現橫向滾動條了（當然如果當內部盒子寬度超出外層盒子，就會出現橫向滾動條了），效果圖如下：

?

4、常用屬性說明

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

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

4.1、滾動條顏色：color屬性

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

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

?

4.2、滾動條粗細：size屬性

設置滾動條粗細尺寸的屬性為size，直接在標簽上添加即可，其中默認值是4，例如當我設置size="10"的時候，

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

?

4.3、是否開啟監聽容器大小變化：resize屬性

開啟監聽容器大小變化的屬性名為resize，直接在標簽上添加即可，<happy-scroll?color="red"?size="10"?resize> ，這樣，當你因為點擊頁面操作時，如果內容區的寬高變化了，滾動條的長短也會相應的變化（happy-scroll標簽內的第一層標簽開始就是內容區，這里是class為con的div）

例如：假設點擊頁碼某一個地方后，div.con的高度變成了2000px：

?

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

則滾動條效果為如圖：

?

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。