看效果之前我们首先了解一下滚动条

::-webkit-scrollbar — 整个滚动条
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
::-webkit-scrollbar-track — 滚动条轨道
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

//根据需要往里面添加样式即可

具体设置方法可参考 ::-webkit-scrollbar样式设计
在这里插入图片描述

设置后的效果

在这里插入图片描述

首先，安装插件

npm install vue3-smooth-scroll --save -g

全局注册，引入 vue3-smooth-scroll 插件

在main.js 中添加注册、调用

import VueSmoothScroll from "vue3-smooth-scroll";//引入插件
app.use(VueSmoothScroll)//调用插件

在这里插入图片描述

在app.vue 中添加 style

第一种方法：
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
第二种方法
::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }

在这里插入图片描述

边学边总结！！！同时也希望对大家有所帮助！！！

致力于博学、深学、总结， 尝遍天下技术栈！！！

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue