寫在前面： 我是 揚帆向海，這個昵稱來源于我的名字以及女朋友的名字。我熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。

這博客是對自己學習的一點點總結及記錄，如果您對 Java、算法 感興趣，可以關注我的動態，我們一起學習。

用知識改變命運，讓我們的家人過上更好的生活。

今天在自己開發的一個項目中，需求是讓瀏覽器的滾動軸變細。想了好長時間才完成，在目前的測試中，滾動條在IE瀏覽器中不支持。

scrollbar.css

@charset 'utf-8';::-webkit-scrollbar { width: 5px; } /*定義滾動條軌道 內陰影+圓角*/ ::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(0,0,0,0.1); } /*定義滑塊 內陰影+圓角*/ ::-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://www.leifengta.com.cn/bcjs/static/css/scrollbar.css' rel='external nofollow' >

方法二

1. 首先需要先下載我們所需要的模塊，這里我用的是“vuescroll”

//老規矩，先安裝模塊 npm install vuescroll

2. 在項目中進行導入

//main.js import vuescroll from ’vuescroll’; import ’vuescroll/dist/vuescroll.css’; Vue.use(vuescroll);

3. 引入(瀏覽器環境)

<!-- 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, //是否只有滾動的時候才顯示滾動條 background: ’red’, }}, } }, }</script>

到此這篇關于vue中改變滾動條樣式的方法的文章就介紹到這了,更多相關vue 改變滾動條樣式內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！