vue中改變滾動條樣式的方法

更新時間：2020年03月03日 09:59:32 作者：揚帆向海

這篇文章主要介紹了vue中改變滾動條樣式的方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

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

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

今天在自己開發(fā)的一個項目中，需求是讓瀏覽器的滾動軸變細。想了好長時間才完成，在目前的測試中，滾動條在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”

  //老規(guī)矩，先安裝模塊
  npm install vuescroll

2. 在項目中進行導入

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

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

您可能感興趣的文章:

Vue實現(xiàn)Tab標簽路由效果并用Animate.css做轉場動畫效果的代碼
這篇文章主要介紹了Vue實現(xiàn)Tab標簽路由效果，并用Animate.css做轉場動畫效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-07-07
vue前端自適應布局實現(xiàn)教程(一步到位所有自適應)
?自適應布局是一種根據(jù)不同的設備屏幕分辨率進行布局的方式,它為不同的屏幕分辨率定義了不同的布局,下面這篇文章主要給大家介紹了關于vue前端自適應布局實現(xiàn)的相關資料,需要的朋友可以參考下
2024-08-08
詳解Vue ElementUI手動上傳excel文件到服務器
這篇文章主要介紹了詳解Vue ElementUI手動上傳excel文件到服務器，對ElementUI感興趣的同學，可以參考下
2021-05-05
關于Vue v-on指令的使用
這篇文章主要介紹了關于Vue v-on指令的一些使用場景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下
2021-10-10
如何用vite打包解決前端發(fā)版后瀏覽器緩存問題
這篇文章主要介紹了如何用vite打包解決前端發(fā)版后瀏覽器緩存問題的相關資料,這樣的配置能夠有效避免瀏覽器緩存問題,確保瀏覽器每次都能加載最新的代碼,同時又不影響第三方庫的緩存效果,需要的朋友可以參考下
2024-11-11
解決element-ui的下拉框有值卻無法選中的情況
這篇文章主要介紹了解決element-ui的下拉框有值卻無法選中的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
15個Vue技巧,你都知道嗎
在使用 Vue 開發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級的技術點，總會有用的，本文就介紹了15個Vue技巧，具有一定的參考價值，感興趣的可以了解一下
2022-02-02
基于Vue實現(xiàn)手勢簽名
這篇文章主要為大家詳細介紹了基于Vue實現(xiàn)手勢簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
vue引入組件的幾種方法代碼示例
vue的一個強大功能就是組件化開發(fā),下面這篇文章主要給大家介紹了關于vue引入組件的幾種方法,文中給出了詳細的代碼及圖文介紹,需要的朋友可以參考下
2024-04-04
vue加載自定義的js文件方法
下面小編就為大家分享一篇vue加載自定義的js文件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03