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


Posted in Javascript onMarch 03, 2020

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

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

Javascript 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 #Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 #Javascript
使用vue打包进行云服务器上传的问题
Mar 02 #Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 #Javascript
JS如何生成随机验证码
Mar 02 #Javascript
js实现烟花特效
Mar 02 #Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 #Javascript
You might like
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php 验证码实例代码
2010/06/01 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript显示选择目录对话框的代码
2008/11/10 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python threading多线程编程实例
2014/09/18 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
文秘应聘自荐书范文
2014/02/18 职场文书
殡葬服务心得体会
2014/09/11 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
小浪底导游词
2015/02/12 职场文书
公务员处分决定书
2015/06/25 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers