vue中改變滾動(dòng)條樣式的方法
寫在前面: 我是 揚(yáng)帆向海,這個(gè)昵稱來源于我的名字以及女朋友的名字。我熱愛技術(shù)、熱愛開源、熱愛編程。技術(shù)是開源的、知識(shí)是共享的。
這博客是對(duì)自己學(xué)習(xí)的一點(diǎn)點(diǎn)總結(jié)及記錄,如果您對(duì) Java、算法 感興趣,可以關(guān)注我的動(dòng)態(tài),我們一起學(xué)習(xí)。
用知識(shí)改變命運(yùn),讓我們的家人過上更好的生活。
今天在自己開發(fā)的一個(gè)項(xiàng)目中,需求是讓瀏覽器的滾動(dòng)軸變細(xì)。想了好長時(shí)間才完成,在目前的測試中,滾動(dòng)條在IE瀏覽器中不支持。
scrollbar.css
@charset 'utf-8';::-webkit-scrollbar { width: 5px; } /*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(0,0,0,0.1); } /*定義滑塊 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rgba(0,0,0,0.1);}
在 index.html中引入樣式
<link rel='stylesheet' href='http://m.b3g6.com/bcjs/static/css/scrollbar.css' rel='external nofollow' >
方法二
1. 首先需要先下載我們所需要的模塊,這里我用的是“vuescroll”
//老規(guī)矩,先安裝模塊 npm install vuescroll
2. 在項(xiàng)目中進(jìn)行導(dǎo)入
//main.js import vuescroll from ’vuescroll’; import ’vuescroll/dist/vuescroll.css’; Vue.use(vuescroll);
3. 引入(瀏覽器環(huán)境)
<!-- html --><script src='https://unpkg.com/vue'></script><script src='https://unpkg.com/vuescroll'></script><!-- 引入vuescroll-slide --><script src='https://unpkg.com/vuescroll/dist/vuescroll-slide.js'></script><!-- 引入vuescroll-native --><script src='https://unpkg.com/vuescroll/dist/vuescroll-native.js'></script><link rel='stylesheet' type='text/css' rel='external nofollow' />
4. 使用
<!-- 組件的模板 --><template> <div class=’your-container’> <!-- bind your configurations --> <vue-scroll :ops='ops' style='width:200px;height:100px'><ul class=’your-content’> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li> <li>dsfdsfdfg</li></ul> </vue-scroll> </div></template><!-- 組件的模型 --><script> export default { // 組件的名稱 name: 'car', data() { return {ops: { vuescroll: {}, scrollPanel: {}, rail: { keepShow:true }, bar: { hoverStyle: true, onlyShowBarOnScroll: false, //是否只有滾動(dòng)的時(shí)候才顯示滾動(dòng)條 background: ’red’, }}, } }, }</script>
到此這篇關(guān)于vue中改變滾動(dòng)條樣式的方法的文章就介紹到這了,更多相關(guān)vue 改變滾動(dòng)條樣式內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例2. 關(guān)于IDEA 2020.3 多窗口視圖丟失的問題3. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)4. js實(shí)現(xiàn)碰撞檢測5. 一文帶你徹底理解Java序列化和反序列化6. 用Spring JMS使異步消息變得簡單7. PHP驗(yàn)證碼工具-Securimage8. Python 制作查詢商品歷史價(jià)格的小工具9. Python 利用Entrez庫篩選下載PubMed文獻(xiàn)摘要的示例10. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條

網(wǎng)公網(wǎng)安備