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 相关文章推荐
addEventListener 的用法示例介绍
May 07 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
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防止SQL注入详解及防范
2013/11/12 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
javascript 闭包详解
2015/02/15 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python中存取文件的4种不同操作
2018/07/02 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python同时迭代多个序列的方法
2020/07/28 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
会计系中文个人求职信
2013/12/24 职场文书
消防先进事迹材料
2014/02/10 职场文书
反对邪教标语
2014/06/30 职场文书
飞越疯人院观后感
2015/06/09 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
送给客户微信问候语!
2019/07/04 职场文书