vue中改变滚动条样式的方法

更新时间：2020年03月03日 09:59:32 作者：扬帆向海

这篇文章主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

写在前面：我是扬帆向海，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。

这博客是对自己学习的一点点总结及记录，如果您对 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="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" 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 改变滚动条样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3中ref和reactive的基本使用及区别详析
这篇文章主要给大家介绍了关于Vue3中ref和reactive的基本使用及区别的相关资料,需要的朋友可以参考下
2022-07-07
关于vue.js弹窗组件的知识点总结
最近在开发过程对对于组件化的开发有一些感想，于是开始记录下这些。弹窗组件一直是 web 开发中必备的，使用频率相当高，最常见的莫过于 alert，confirm和prompt这些,不同的组件库对于弹窗的处理也是不一样的，下面来一起看看吧。
2016-09-09
Vue中provide和inject的使用教程详解
在 Vue 中,provide 和 inject 是用于实现祖先组件向后代组件传递数据的一种方式,本文主要来和大家详细讲讲provide和inject的使用方法,希望对大家有所帮助
2024-02-02
vue父子组件的数据传递示例
这篇文章主要介绍了vue父子组件的数据传递示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
vite构建vue3项目的全过程记录
vite是VUE3创建项目的工具,项目大了之后,性能明显优于webpack,下面这篇文章主要给大家介绍了关于vite构建vue3项目的相关资料,需要的朋友可以参考下
2023-01-01
详解vue中使用protobuf踩坑记
这篇文章主要介绍了vue中使用protobuf踩坑记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
本文通过一个demo给大家介绍了vue子组件改变父组件传递的prop值通过sync实现数据双向绑定,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
vue获取验证码倒计时组件
这篇文章主要为大家详细介绍了vue获取验证码倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08
vue中getters的使用与四个map方法的使用方式
这篇文章主要介绍了vue中getters的使用与四个map方法的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
Vue如何监测数组类型数据发生改变的(推荐)
这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11

vue中改变滚动条样式的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具