vue3+elementplus 滚动条Scrollbar隐藏x轴的做法

最新推荐文章于 2024-05-16 07:47:36 发布
最新推荐文章于 2024-05-16 07:47:36 发布
阅读量1.3k 收藏
点赞数 1
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/globalvariableA/article/details/124483211
版权

.el-scrollbar ::v-deep .is-horizontal{

display: none;

}

使用样式穿透，直接将整个div隐藏起来

同理，y轴也可通过审查元素，结合样式穿透实现隐藏效果

globalvariableA
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-perfect-scrollbar:Vue.js包装器为版本3提供了完美的滚动条
04-29
vue3-perfect-scrollbar Vue.js简约但功能强大的包装器，可完美显示滚动条 为什么创建它？ 因为我 :red_heart: 在我的项目中使用（ :raising_hands: ）。 也是因为github上的当前解决方案已经过时或过于复杂。 你为什么要使用它？ 因为您想以一种简单的方式将加载到Vue项目中。 也是因为此插件是通过汇总进行更新，测试和构建的。 这样您就不会发现任何不必要的东西 :pile_of_poo: 此仓库中的代码。 我希望 :folded_hands: 。 如果您有合理的公关资格，欢迎您 :sign_of_the_horns: 安装 npm npm install vue3-perfect-scrollbar 纱 yarn add vue3-perfect-scrollbar 如何使用 全球注册 import { createApp } from 'vue' import App from './App.vue' import PerfectScrollbar f
vue3+elementPlus后台管理系统
08-19
Vue3 + ElementPlus 后台管理系统是一个基于Vue.js最新版本（Vue3）和ElementPlus UI库构建的高效、易用的后台管理平台。Vue3带来了许多改进和优化，包括Composition API、Suspense、Teleport等新特性，提升了开发...
ElementUI隐藏组件滚动条
qq_54381639的博客
07-12 4627
当页面遇到需要滚动条的时候，浏览器自带的滚动条不够美观，达不到自己的需求。那么elementUI自带的隐藏组件el-scrollbar一定要尝试下，具体使用如下：
Vue, Element-UI 滚动条： el-scrollbar 基本使用
sonichenn的博客
03-30 5501
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes,
Element Plus/vue3 无限级导航实现
最新发布
小张微说的博客
05-16 1301
在使用element plus 时，最初要使用的就是导航组件了，官网上看到的也就是写死的一级/二级导航，那么如何设计一个无限级且动态的导航呢？毋庸置疑，递归。废话不多说，直接看代码和效果： 代码： 目录结果 SidebarItem.vue <template> <el-menu-item :index="item ? item.url : ''" v-if="!it...
vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置
NICKDL的博客
07-07 908
【代码】vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置。
实现一个vue3组件库 - scrollbar滚动条
qq_52989046的博客
08-10 1462
前言 思来想去很久，我都不知道该最先介绍哪一个组件才好？虽然我写的第一个组件是button按钮, 但是也是因为简单所以第一个写，逻辑代码不是很多，样式倒是一大堆...感觉不适合用作开篇介绍，最后选择了
在vue3 中，使用element-plus中的el-scrollbar,让内容元素自动滚动
H_jrqn的博客
08-15 4206
在vue3 中，使用element-plus中的el-scrollbar,让内容元素自动滚动
Vue3+el-scrollbar 实现向上加载更多向下刷新数据
Admans的专栏
02-19 2180
【代码】Vue3+el-scrollbar 实现向上加载更多向下刷新数据。
基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip
08-29
基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码...
基于vue3+elementPlus的后台管理系统模板
02-18
Vue3和ElementPlus是当前前端开发领域中备受瞩目的技术栈。Vue3是Vue.js的最新版本，带来了诸多性能优化和开发体验改进，而ElementPlus则是一个基于Vue3的组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ElementPlus cron组件
04-09
Vue3 + ElementPlus Cron 组件是前端开发中的一个强大工具，它允许开发者在Web应用中实现复杂的定时任务调度功能。这个组件基于Vue3框架，并利用了ElementPlus UI库的组件和设计风格，为用户提供了友好的界面和丰富...
vue3下使用elementplus的el-scrollbar美化滚动条及触底加载
lfYexun的博客
12-18 2246
el-scrollbar有一个触底加载的坑点，就是加载后内容高度增加了，但是滚动条位置没有跟着变化，所以需要用手动触发官方写的setScrollTop方法进行重置，就可以了。
el-scrollbar滚动条x轴不显示问题,以及宽度问题
qq_43780814的博客
11-25 1239
css中加入 /deep/ .el-scrollbar__view{display:inline-block !important;} /deep/ .el-scrollbar__wrap{overflow-x: hidden !important;} //html el-scrollbar.left el-tree( :data="treeData" node-key="id" ref="treeRef" default-expand-all @node.
vue3 处理 element-plus el-scrollbar 横向隐藏 滑动条问题
qq_28805447的博客
09-07 624
vue3 处理 element-plus el-scrollbar 横向 隐藏滑动条
vue 中使用el-scrollbar 滚动条
~~
06-02 2253
ElementUI的隐藏组件，官方没放出来，但是可以直接在项目中使用。 重点： 设置外层容器的高度 设置组件样式style="height:100%" <template> <div style="height:600px;"> <el-scrollbar style="height:100%"> <div> 内容 </div> </el-scrollbar> ..
（组件）vue3封装自定义滚动条
次顶级的博客
01-01 3418
封装vue3自定义滚动条，配置颜色，高度。宽度，触底或顶事件，滚动条可以监听页面尺寸和元素尺寸变化而自动变化
vue3中设置滚动条样式
刘慧丽的博客
08-09 2203
设置滚动条样式
vue3+elementplus实现滚动通知栏
09-03
你可以使用Vue 3和Element Plus来实现一个滚动通知栏。以下是一个简单的示例： 首先，安装Element Plus和Vue Router（如果还没有安装）： ```bash npm install element-plus vue-router ``` 然后，在你的Vue文件中，引入所需的组件和样式： ```vue <template> <div class="scroll-notice"> <el-scrollbar ref="scrollbar" :wrap-style="{ height: '40px' }"> <el-scrollbar-wrap> <div class="notice-content" :style="{ top: top + 'px' }"> <!-- 这里放置通知内容 --> <div v-for="(notice, index) in notices" :key="index" class="notice-item"> {{ notice }} </div> </div> </el-scrollbar-wrap> </el-scrollbar> </div> </template> <script> import { ref, reactive, watch } from 'vue'; export default { name: 'ScrollNotice', data() { return { top: 0, notices: [ '通知1', '通知2', '通知3', // 更多通知... ], }; }, mounted() { this.startScroll(); }, methods: { startScroll() { const scrollHeight = this.$refs.scrollbar.$el.clientHeight; const contentHeight = this.$refs.scrollbar.scrollContent.offsetHeight; if (contentHeight > scrollHeight) { // 开始滚动 const updateTop = () => { this.top -= 1; if (this.top <= -contentHeight) { this.top = scrollHeight; } }; this.timer = setInterval(updateTop, 20); } }, }, beforeUnmount() { clearInterval(this.timer); }, }; </script> <style> .scroll-notice { width: 100%; height: 40px; } .notice-content { position: relative; } .notice-item { line-height: 40px; } </style> ``` 在上面的示例中，我们使用了`el-scrollbar`组件来创建一个带有滚动条的容器。通知内容放置在一个具有绝对定位的容器内，并通过改变容器的`top`值来实现滚动效果。在`mounted`钩子中，我们调用`startScroll`方法来启动滚动。 当通知内容的高度大于容器的高度时，我们会通过定时器不断更新`top`值，从而实现滚动效果。当滚动到底部时，我们将`top`值重置为容器的高度，以实现循环滚动。 请注意，这只是一个简单的示例，你可以根据实际需求进行修改和扩展。你可能需要根据具体情况进行样式调整和数据绑定。 希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值