el-scrollbar组件使用踩坑记录

一、el-scrollbar和浏览器原生滚动条一起出现

问题描述

el-scrollbar组件主要用于替换浏览器原生导航条。如下图所示,使用el-scrollbar组件后,发现未能成功替换掉浏览器原生导航条,二者同时出现。
在这里插入图片描述

引发原因

el-scrollbarheight属性如果不设置,则会根据父容器高度自适应。父容器是一个idappdiv,从控制台中发现,父容器div的高度被填充到了 3000px,而当前视口的最大高度(100vh)为 920px,所以同时显示出了el-scrollbar和浏览器的原生导航条。

解决方法

el-scrollbar设置高度height="100vh"

<template><el-scrollbar height="100vh"><router-view /></el-scrollbar>
</template>

二、使用el-scrollbarel-backtop不显示的问题

问题描述

el-backtop组件是一个返回页面顶部的操作按钮。让页面向下滚动,直到底部都没有显示返回顶部按钮,去掉el-scrollbar后发现返回顶部按钮可以正常显示、使用及隐藏。

引发原因

el-backtoptarget属性用于设置触发滚动的对象,默认是document.documentElement对象。使用el-scrollbar后,由于替换了浏览器原生导航条,所以监听不到document.documentElement对象发生滚动,应该修改为监听el-scrollbar滚动。

解决方法

el-backtop设置滚动对象target=".el-scrollbar__wrap"

<el-backtop target=".el-scrollbar__wrap" :right="60" :bottom="60"><div class="icon-backtop">🔝</div>
</el-backtop>

三、使用el-anchor后滑动滚动条无法监听锚点变化

问题描述
el-anchor组件是锚点导航栏,用于页面内容定位。如下图所示,让页面向下滚动,发现锚点不会随着页面内容的改变而进行切换。
在这里插入图片描述

引发原因

el-anchor监听滚动的容器默认值为 ‘—’,应该设置为el-scrollbar,监听滚动条滚动。

解决方法

el-anchor设置滚动容器container=".el-scrollbar__wrap"

<el-anchor:marker="false"ref="anchorRef"direction="horizontal"container=".el-scrollbar__wrap"
><el-anchor-link>...</el-anchor-link>
</el-anchor>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端根据目录生成模块化路由routes

根据约定大于配置的逻辑&#xff0c;如果目录结构约定俗成&#xff0c;前端是可以根据目录结构动态生成路由所需要的 route 结构的&#xff0c;这个过程是要在编译时 进行&#xff0c;生成需要的代码&#xff0c;保证运行时的代码正确即可 主流的打包工具都有对应的方法读取文…

【不容错过】可灵AI重磅更新:画质升级,运镜控制,首尾帧自定义,还有30万创作激励奖金!

还记得最近在各大平台肆虐的老照片变成视频吗&#xff0c;就是用快手的可灵AI做的&#xff0c;今天可灵又迎来了一次重大更新。 「电脑端上线了」 之前一直用其他工具生的图片还需要保存到手机上&#xff0c;再用可灵来生成视频&#xff0c;很多人都能感受到手机操作不太方便&…

Vue3项目给ElementPlus设置中文的两个方案

介绍 在Vue3项目将ElementPlus切换为中文 1、在App.vue的文件中修改 <template><el-config-provider :locale"zhCn"><router-view></router-view></el-config-provider> </template><script lang"ts" setup>im…

elasticsearch源码分析-04集群状态发布

集群状态发布 cluster模块封装了在集群层面执行的任务&#xff0c;如集群健康、集群级元信息管理、分片分配给节点、节点管理等。集群任务执行之后可能会产生新的集群状态&#xff0c;如果产生新的集群状态主节点会将集群状态广播给其他节点。 集群状态封装在clusterState中&…

Linux下网络编程-简易poll服务器和客户端

Linux下网络编程-简易poll服务器和客户端 简易poll服务器: //编译命令&#xff1a;g -g xxx.cpp -o xxx #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h> #include <sys/socket.h…

ionic7 使用Capacitor打包 apk 之后,设置网络权限

报错处理 在打包的时候遇到过几个问题&#xff0c;这里记录下来两个 Visual Studio Code运行ionic build出错显示ionic : 无法加载文件 ionic 项目通过 android studio 打开报错 capacitor.settings.gradle 文件不存在 ionic7 项目初始化以及打包 apk 这篇文章讲到了如果安装…

2-25 基于matlab的语音信号降噪处理算法

基于matlab的语音信号降噪处理算法&#xff0c;采用谱减法&#xff0c;可以对强噪声背景下的语音信号进行去噪。输入原始信号及加噪信号&#xff0c;对加噪信号进行降噪&#xff0c;并提高信噪比。程序已调通&#xff0c;可直接运行。 2-25 语音信号降噪处理算法 谱减法 - 小红…

餐饮管理系统-计算机毕业设计源码43667

餐饮管理系统 摘 要 在信息化、数字化的时代背景下&#xff0c;餐饮行业面临着前所未有的挑战与机遇。为了提高运营效率、优化顾客体验&#xff0c;餐饮企业亟需一套高效、稳定且灵活的管理系统来支撑其日常运营。基于Spring Boot的餐饮管理系统应运而生&#xff0c;成为餐饮行…

mac 安装nvm的教程

在macOS上切换Node.js版本&#xff0c;可以使用nvm&#xff08;Node Version Manager&#xff09;。以下是安装nvm和切换Node.js版本的步骤&#xff1a; 安装nvm 下载方式 终端复制输入&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.…

教育科研行业算力池化解决方案

教育科研行业算力池化解决方案 解决方案概述 1. 算力资源集中管理 建立校级算力中心:通过信息中心建设校级的算力中心,将分散在各学院或科研团队的算力资源集中管理。利用算力池化技术:采用先进的算力池化技术(如趋动科技的OrionX),将物理GPU资源切分为多个虚拟GPU(vGP…

GIT - 一条命令把项目更新到远程仓库

前言 阅读本文大概需要1分钟 说明 更新项目到远程仓库只需要执行一条命令&#xff0c;相当的简便 步骤 第一步 编辑配置文件 vim ~/.bash_profile第二步 写入配置文件 gsh() {local msg"${1:-ADD COMMIT PUSH}"git add . && git commit -m "$m…

mipi协议中的calibration和scramble模式

在MIPI(Mobile Industry Processor Interface)协议中,calibration(校准)和scramble(加扰)模式是两个重要的特性,它们分别用于优化数据传输的准确性和减少信号干扰。以下是对这两个模式的详细解析: Calibration(校准)模式 目的与功能: 校准模式主要用于优化和补偿由…

数据库关键字执行顺序

在 SQL 中&#xff0c;关键字的执行顺序通常如下&#xff1a; FROM&#xff1a;确定要查询的表或数据源&#xff0c;并执行表之间的连接操作&#xff08;如 INNER JOIN、LEFT JOIN 等&#xff09;。FROM 子句执行顺序为从后往前、从右到左。ON&#xff1a;应用连接条件&#xf…

C生万物之文件操作

文章目录 一、为什么使用文件&#xff1f;二、什么是文件&#xff1f;1、程序文件2、数据文件3、文件名 三、文件的打开和关闭1、文件指针2、文件的打开和关闭 四、文件的顺序读写1. 8个重要的库函数1.1 单字符输入输出【fputc和fgetc】1.2 文本行输入输出【fputs和fgets】1.3 …

主干网络篇 | YOLOv5/v7 更换主干网络之 ShuffleNetv2 | 高效CNN架构设计的实用指南(2)

主干网络篇 | YOLOv5/v7 更换主干网络之 ShuffleNetv2 | 高效CNN架构设计的实用指南 概述 YOLOv5和YOLOv7是目前主流的轻量级目标检测模型&#xff0c;在速度和精度方面取得了良好的平衡。然而&#xff0c;传统的YOLOv5/v7模型使用FPN和CSPNet等结构作为主干网络&#xff0c;…

机器学习 C++ 的opencv实现SVM图像二分类的测试 (三)【附源码】

机器学习 C 的opencv实现SVM图像二分类的测试 (三) 数据集合下载地址&#xff1a;https://download.csdn.net/download/hgaohr1021/89506900 根据上节得到的svm.xml&#xff0c;测试结果为&#xff1a; #include <stdio.h> #include <time.h> #include <o…

网络安全应急处理流程

网络安全应急处理流程是指在发生网络安全事件时&#xff0c;组织应采取的一系列措施&#xff0c;以快速响应、控制、恢复和调查网络安全事件&#xff0c;确保业务连续性和数据安全。以下是一个详细的网络安全应急处理流程&#xff1a; 1. 准备阶段 目标&#xff1a;建立和维护…

yolov5 json 和 txt数据格式关系

训练阶段 和 推理阶段数据格式转换说明 关于yolov5 数据格式一直以来都傻傻分不清楚&#xff0c;这下进行了一个梳理&#xff0c;做了笔记&#xff0c;也希望可帮助到有需要的有缘人~ 转换部分代码

大厂面试官赞不绝口的后端技术亮点【后端项目亮点合集(2):消息队列、ElasticSearch、Mysql等亮点合集】

本文将持续更新~~ 历史文章&#xff1a; 后端项目亮点合集&#xff08;1&#xff09;&#xff1a;Redis篇_后端项目有什么亮点-CSDN博客 本文的作用&#xff1a; &#xff08;1&#xff09;简历优化&#xff1a;针对自己的简历&#xff0c;对Redis亮点进行优化升级&#xff0c;…

虚拟机交叉编译基于ARM平台的opencv(ffmpeg/x264)

背景&#xff1a; 由于手上有一块rk3568的开发板&#xff0c;需要运行yolov5跑深度学习模型&#xff0c;但是原有的opencv不能对x264格式的视频进行解码&#xff0c;这里就需要将ffmpegx264编译进opencv。 但是开发板算力有限&#xff0c;所以这里采用在windows下&#xff0c;安…