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动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
详解小程序云开发数据库
May 20 Javascript
taro开发微信小程序的实践
May 21 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
JavaScript实现简易计算器小功能
Oct 22 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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python遍历目录中的所有文件的方法
2016/07/08 Python
Django内容增加富文本功能的实例
2017/10/17 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python中私有属性的定义方式
2020/03/05 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
pytorch实现查看当前学习率
2020/06/24 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
中专毕业生自荐信范文
2013/11/28 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
QT与javascript交互数据的实现
2021/05/26 Javascript
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL