vue中怎么改變滾動條樣式

這篇文章給大家分享的是有關vue中怎么改變滾動條樣式的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

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

今天在自己開發的一個項目中，需求是讓瀏覽器的滾動軸變細。想了好長時間才完成，在目前的測試中，滾動條在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="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" href="https://unpkg.com/vuescroll/dist/vuescroll.css" rel="external nofollow" />

4. 使用

<!-- 組件的模板 -->
<template>
   <div class='your-container'>
      <!-- bind your configurations -->
      <vue-scroll :ops="ops" >
        <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中怎么改變滾動條樣式”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！