这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用

样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就可以
::-webkit-scrollbar {

  width: 10px;

  height: 1px;

}

::-webkit-scrollbar-thumb { //滑块部分

  border-radius: 5px;

  background-color: rgb(175, 74, 240);

}

::-webkit-scrollbar-track { //轨道部分

  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

  background: #ededed;

  border-radius: 5px;

}

如果把::-webkit-scrollbar的width和height设置为0,还可以起到隐藏滚动条的作用,不过上文提到过,这个方法只适用Chrome浏览器,如果想在其他浏览器隐藏滚动条,可以参考下来这篇文章

overflow 隐藏滚动条样式

vue中修改滚动条样式的更多相关文章

  1. vue中修改swiper样式

    问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...

  2. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

  3. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  4. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  5. vue中关于滚动条的那点事

    vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...

  6. css 溢出滚动条显示，修改滚动条样式

    文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...

  7. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  8. Vue中修改组件默认样式

    vue 中直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果. 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .contr ...

  9. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

随机推荐

  1. （一）java基础篇---第一个程序

    先认识java的基础知识 1.变量命名规则 :1)变量名由数字字母下划线组成,2)不能使用java的关键字,比如public这种,3)遵循小驼峰命名法 2.数据类型 2.1基本数据类型有8种 其中分为 ...

  2. C++学习记录1

    代码1:转义字符 点击查看代码 #include<iostream> using namespace std; void test01()//换行 { cout << &quo ...

  3. 【每天学一点-05】使用umi.js代理，解决跨域问题（前端）

    一.user.ts 前端请求接口 import request from 'umi-request'; const getAway = '/user'; // 获取用户列表 export const ...

  4. C++ 实现可变参数的三个方法

    有时我们无法提前预知应该向函数传递几个实参.例如,我们想要编写代码输出程序产生的错误信息,此时最好用同一个函数实现该项功能,以便对所有错误的处理能够整齐划一.然而,错误信息的种类不同,所以调用错误输出 ...

  5. Azure Devops(十五) 使用Azure的私有Maven仓库

    上一篇文章中,我们介绍了如何使用Azure的nuget仓库,今天我们来研究一下如何使用azure给我们提供的maven仓库. 首先,我们打开azureDevops,点击到制品界面,然后选择maven. ...

  6. 微信公众号授权登录后报redirect_uri参数错误的问题

      在进行微信公众号二次开发的时候,需要通过授权码模式来进行微信授权.比如,在进行登录的时候,用户点击了登录按钮,然后弹出一个授权框,用户点击同意后,就可以获取用户的OpenId等信息了.这篇文章主要 ...

  7. PHP goto

    if (true){ echo "run if\n"; goto fly; } else{ fly: echo "run else"; }

  8. OpenCV4之C++入门详解

    OpenCV之C++入门 1.Visual Studio安装及环境配置与搭建 下载地址:https://my.visualstudio.com/Downloads?q=Visual,下载后按照说明安装 ...

  9. vue 使用 monaco-editor 实现在线编辑器

    前言 项目里使用到 monaco-editor 编辑器,实现源码编辑器,看了很多网上教程,记录一下实现过程.在此之前引用很多博主的方法安装但是引入的时候,运行项目总是各种各样的错误,找不到头绪.终于在 ...

  10. 浅谈MySQL的sql_mode

    SQL mode 今天我们来分享一下MySQL的SQL mode , 这也是我们比较容易忽略的一点,我们在一开始安装数据库的时候其实就要先考虑要保留哪些SQL mode,去除哪些,合理的配置能够减少很 ...