el-scrollbar组件使用踩坑记录
一、el-scrollbar和浏览器原生滚动条一起出现
问题描述
el-scrollbar组件主要用于替换浏览器原生导航条。如下图所示,使用el-scrollbar组件后,发现未能成功替换掉浏览器原生导航条,二者同时出现。

引发原因
el-scrollbar的height属性如果不设置,则会根据父容器高度自适应。父容器是一个id为app的div,从控制台中发现,父容器div的高度被填充到了 3000px,而当前视口的最大高度(100vh)为 920px,所以同时显示出了el-scrollbar和浏览器的原生导航条。
解决方法
给el-scrollbar设置高度height="100vh"。
<template><el-scrollbar height="100vh"><router-view /></el-scrollbar>
</template>
二、使用el-scrollbar后el-backtop不显示的问题
问题描述
el-backtop组件是一个返回页面顶部的操作按钮。让页面向下滚动,直到底部都没有显示返回顶部按钮,去掉el-scrollbar后发现返回顶部按钮可以正常显示、使用及隐藏。
引发原因
el-backtop的target属性用于设置触发滚动的对象,默认是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>
相关文章:
el-scrollbar组件使用踩坑记录
一、el-scrollbar和浏览器原生滚动条一起出现 问题描述 el-scrollbar组件主要用于替换浏览器原生导航条。如下图所示,使用el-scrollbar组件后,发现未能成功替换掉浏览器原生导航条,二者同时出现。 引发原因 el-scrollbar的height属性如果…...
Linux计算机结构
1.计算机设计原理 冯诺依曼体系结构 通过该结构得出:中央处理器 2.操作系统整体框架 操作系统是不会让你直接乱使用底层的各种硬件,但为了依旧能够让你使用到该资源则会给你预留一些窗口去让你与其交互(类比银行,直接小窗口交互,…...
应用进程、SurfaceFlinger进程、HWC进程 之间的关系
应用进程、SurfaceFlinger进程、HWC(Hardware Composer)进程在Android系统中扮演着重要的角色,它们之间的关系和通信流程是Android图形显示系统的核心部分。以下是这三者之间关系和通信流程的详细分析: 一、三者之间的关系 应用进…...
66.Python-web框架-Django-免费模板django-datta-able的分页的一种方式
目录 1.方案介绍 1.1实现效果 1.2django.core.paginator Paginator 类: Page 类: EmptyPage 和 PageNotAnInteger 异常: 1.3 templatetags 2.方案步骤 2.1创建一个common app 2.2创建plugins/_pagination.html 2.3 其他app的views.py查询方法 2.4在AIRecords.html里…...
Python编程学习笔记(1)--- 变量和简单数据类型
1、变量 在学习编程语言之前,所接触的第一个程序,绝大多数都是: print("Hello world!") 接下来尝试使用一个变量。在代码中的开头添加一行代码,并对第二行代码进行修改,如下: message "…...
第二证券:资金抱团“高股息”,超三成A股年内创历史新低!
A股商场行情冰火两重天。 “预制菜榜首股”跌破发行价 7月8日,味知香盘中最低跌至19.26元/股,股价跌破发行价,并创前史新低。揭露资料显现,公司是集研发、生产、销售为一体的半成品菜企业,现在具有8大产品系列&#…...
ASAN排查程序中内存问题使用总结
简介 谷歌有一系列Sanitizer工具,可用于排查程序中内存相关的问题。常用的Sanitizer工具包括: Address Sanitizer(ASan):用于检测内存使用错误。Leak Sanitizer(LSan):用于检测内存…...
day01:项目概述,环境搭建
文章目录 软件开发整体介绍软件开发流程角色分工软件环境 外卖平台项目介绍项目介绍定位功能架构 产品原型技术选型 开发环境搭建整体结构:前后端分离开发前后端混合开发缺点前后端分离开发 前端环境搭建Nginx 后端环境搭建熟悉项目结构使用Git进行版本控制数据库环…...
Python爬虫与数据可视化:构建完整的数据采集与分析流程
Python爬虫技术概述 Python爬虫是一种自动化的数据采集工具,它可以模拟浏览器行为,访问网页并提取所需信息。Python爬虫的实现通常涉及以下几个步骤: 发送网页请求:使用requests库向目标网站发送HTTP请求。获取网页内容…...
Java---包装类与泛型
1.包装类 1.1 包装类 在Java中,由于基本数据类型不是继承Object类,为了在泛型代码中可以支持基本数据类型,Java给每个基本数据类型各自提供了一个包装类。 如下图 除了char和int基本数据类型的包装类型有点特别,其他的都是首字…...
如何优化 PostgreSQL 中对于复杂数学计算的查询?
文章目录 一、理解复杂数学计算的特点二、优化原则(一)索引优化(二)查询重写(三)数据库配置调整(四)使用数据库内置函数的优势 三、具体的优化方案和示例(一)…...
前端面试题27(在实际项目中,如何有效地利用Vue3的响应式系统提高性能?)
在实际项目中,有效利用Vue3的响应式系统提高性能主要涉及以下几个关键点: 1. 合理使用reactive和ref reactive:用于将复杂的数据结构(如对象或数组)转换成响应式版本。确保只将需要实时更新的数据结构声明为响应式&am…...
掌握Vue 3生命周期:从组合式API到高效代码实践
引言 在 Vue 3 中,生命周期的概念得到了进一步的优化和简化。Vue 3 引入了组合式 API(Composition API),这为开发者提供了更灵活的方式来组织和重用代码逻辑。与传统的选项式 API(Options API)相比&#x…...
使用cgroup对pgsql进行分库资源限制
系统:Centos7 pg版本:14.11 自建pgsql14中有很多个库,一个库对应一个租户,偶尔会出现单个租户执行慢sql影响全局的问题,目前官方也没有比较合适的处理方案或者插件 解决方案: 因为pgsql是多进程应用,所以正好可以使用linux自带的cgroup功能进行资源限制。定时将进程中…...
【网络安全】一文带你了解什么是【网络劫持】
网络劫持(Network Hijacking)是一种网络攻击,攻击者通过非法手段劫持网络通信,导致合法用户的数据流被拦截、篡改或重定向到攻击者控制的系统。这种攻击可以在各种网络层面上进行,包括域名系统(DNS…...
springcloud分布式架构网上商城 LW +PPT+源码+讲解
3系统分析 3.1可行性分析 在开发系统之前要进行系统可行性分析,目的是在用最简单的方法去解决最大的问题,程序一旦开发出来满足了用户的需要,所带来的利益也很多。下面我们将从技术、操作、经济等方面来选择这个系统最终是否开发。 3.1.1技术…...
【Linux】动态库的制作与使用
💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …...
Vue框架引入
vue简介 1.1.vue是什么?Vue官网 英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/ vue是一套构建用户界面的渐进式javascript框架 构建用户界面:将我们手里拿到的数据通过某种办法变成用户可以看见的界面前端工程师的职责:就是在合适的时候发出合适的请求,然后…...
贝叶斯估计(1):期末大乱炖
写在前面! 1 先验分布和后验分布 三种信息:总体信息、样本信息、先验信息 总体信息:“总体是正态分布”;样本信息:总体抽取的样本提供的信息,是最新鲜的信息;先验信息:在抽样之前就…...
电脑找回彻底删除文件?四个实测效果的方法【一键找回】
电脑数据删除了还能恢复吗?可以的,只要我们及时撤销上一步删除操作,还是有几率找回彻底删除文件。 当我们的电脑文件被彻底删除后,尽管恢复的成功率可能受到多种因素的影响,但仍有几种方法可以尝试找回这些文件。本文整…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
Linux中《基础IO》详细介绍
目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改,实现简单cat命令 输出信息到显示器,你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
xmind转换为markdown
文章目录 解锁思维导图新姿势:将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件(ZIP处理)2.解析JSON数据结构3:递归转换树形结构4:Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...
