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 相关文章推荐
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
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
PHP编程网上资源导航
2006/10/09 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python命令行解析模块详解
2018/02/01 Python
python安装requests库的实例代码
2019/06/25 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python取均匀不重复的随机数方式
2019/11/27 Python
基于python实现计算两组数据P值
2020/07/10 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
人力管理专业毕业生求职信
2014/02/27 职场文书
毕业生政审意见范文
2015/06/04 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
Python机器学习之PCA降维算法详解
2021/05/19 Python
PyTorch 如何自动计算梯度
2021/05/23 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js