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中[]和{}对象使用介绍
Mar 20 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
Javascript动画效果(1)
Oct 11 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 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
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
css图片自适应大小
2007/11/28 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python3实现飞机大战游戏
2020/04/24 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
电话客服专员岗位职责
2014/06/28 职场文书
教师党员个人整改措施
2014/10/27 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android