vue 设置和隐藏滚动条

科技前沿 • 2025-03-25 14:36 • 阅读 39

大家好，我是讯享网，很高兴认识大家。

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

::-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 设置和隐藏滚动条

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

设置后的效果

首先，安装插件

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

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

在app.vue 中添加 style

第一种方法：

第二种方法

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

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

vue 设置和隐藏滚动条

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

设置后的效果

首先，安装插件

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

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

在app.vue 中添加 style

第一种方法：

第二种方法

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

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

相关推荐

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