当前位置: 首页 > news >正文

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>

相关文章:

el-scrollbar组件使用踩坑记录

一、el-scrollbar和浏览器原生滚动条一起出现 问题描述 el-scrollbar组件主要用于替换浏览器原生导航条。如下图所示&#xff0c;使用el-scrollbar组件后&#xff0c;发现未能成功替换掉浏览器原生导航条&#xff0c;二者同时出现。 引发原因 el-scrollbar的height属性如果…...

Linux计算机结构

1.计算机设计原理 冯诺依曼体系结构 通过该结构得出:中央处理器 2.操作系统整体框架 操作系统是不会让你直接乱使用底层的各种硬件&#xff0c;但为了依旧能够让你使用到该资源则会给你预留一些窗口去让你与其交互&#xff08;类比银行&#xff0c;直接小窗口交互&#xff0c;…...

应用进程、SurfaceFlinger进程、HWC进程 之间的关系

应用进程、SurfaceFlinger进程、HWC&#xff08;Hardware Composer&#xff09;进程在Android系统中扮演着重要的角色&#xff0c;它们之间的关系和通信流程是Android图形显示系统的核心部分。以下是这三者之间关系和通信流程的详细分析&#xff1a; 一、三者之间的关系 应用进…...

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、变量 在学习编程语言之前&#xff0c;所接触的第一个程序&#xff0c;绝大多数都是&#xff1a; print("Hello world!") 接下来尝试使用一个变量。在代码中的开头添加一行代码&#xff0c;并对第二行代码进行修改&#xff0c;如下&#xff1a; message "…...

第二证券:资金抱团“高股息”,超三成A股年内创历史新低!

A股商场行情冰火两重天。 “预制菜榜首股”跌破发行价 7月8日&#xff0c;味知香盘中最低跌至19.26元/股&#xff0c;股价跌破发行价&#xff0c;并创前史新低。揭露资料显现&#xff0c;公司是集研发、生产、销售为一体的半成品菜企业&#xff0c;现在具有8大产品系列&#…...

ASAN排查程序中内存问题使用总结

简介 谷歌有一系列Sanitizer工具&#xff0c;可用于排查程序中内存相关的问题。常用的Sanitizer工具包括&#xff1a; Address Sanitizer&#xff08;ASan&#xff09;&#xff1a;用于检测内存使用错误。Leak Sanitizer&#xff08;LSan&#xff09;&#xff1a;用于检测内存…...

day01:项目概述,环境搭建

文章目录 软件开发整体介绍软件开发流程角色分工软件环境 外卖平台项目介绍项目介绍定位功能架构 产品原型技术选型 开发环境搭建整体结构&#xff1a;前后端分离开发前后端混合开发缺点前后端分离开发 前端环境搭建Nginx 后端环境搭建熟悉项目结构使用Git进行版本控制数据库环…...

Python爬虫与数据可视化:构建完整的数据采集与分析流程

Python爬虫技术概述 Python爬虫是一种自动化的数据采集工具&#xff0c;它可以模拟浏览器行为&#xff0c;访问网页并提取所需信息。Python爬虫的实现通常涉及以下几个步骤&#xff1a; 发送网页请求&#xff1a;使用requests库向目标网站发送HTTP请求。获取网页内容&#xf…...

Java---包装类与泛型

1.包装类 1.1 包装类 在Java中&#xff0c;由于基本数据类型不是继承Object类&#xff0c;为了在泛型代码中可以支持基本数据类型&#xff0c;Java给每个基本数据类型各自提供了一个包装类。 如下图 除了char和int基本数据类型的包装类型有点特别&#xff0c;其他的都是首字…...

如何优化 PostgreSQL 中对于复杂数学计算的查询?

文章目录 一、理解复杂数学计算的特点二、优化原则&#xff08;一&#xff09;索引优化&#xff08;二&#xff09;查询重写&#xff08;三&#xff09;数据库配置调整&#xff08;四&#xff09;使用数据库内置函数的优势 三、具体的优化方案和示例&#xff08;一&#xff09;…...

前端面试题27(在实际项目中,如何有效地利用Vue3的响应式系统提高性能?)

在实际项目中&#xff0c;有效利用Vue3的响应式系统提高性能主要涉及以下几个关键点&#xff1a; 1. 合理使用reactive和ref reactive&#xff1a;用于将复杂的数据结构&#xff08;如对象或数组&#xff09;转换成响应式版本。确保只将需要实时更新的数据结构声明为响应式&am…...

掌握Vue 3生命周期:从组合式API到高效代码实践

引言 在 Vue 3 中&#xff0c;生命周期的概念得到了进一步的优化和简化。Vue 3 引入了组合式 API&#xff08;Composition API&#xff09;&#xff0c;这为开发者提供了更灵活的方式来组织和重用代码逻辑。与传统的选项式 API&#xff08;Options API&#xff09;相比&#x…...

使用cgroup对pgsql进行分库资源限制

系统:Centos7 pg版本:14.11 自建pgsql14中有很多个库,一个库对应一个租户,偶尔会出现单个租户执行慢sql影响全局的问题,目前官方也没有比较合适的处理方案或者插件 解决方案: 因为pgsql是多进程应用,所以正好可以使用linux自带的cgroup功能进行资源限制。定时将进程中…...

【网络安全】一文带你了解什么是【网络劫持】

网络劫持&#xff08;Network Hijacking&#xff09;是一种网络攻击&#xff0c;攻击者通过非法手段劫持网络通信&#xff0c;导致合法用户的数据流被拦截、篡改或重定向到攻击者控制的系统。这种攻击可以在各种网络层面上进行&#xff0c;包括域名系统&#xff08;DNS&#xf…...

springcloud分布式架构网上商城 LW +PPT+源码+讲解

3系统分析 3.1可行性分析 在开发系统之前要进行系统可行性分析&#xff0c;目的是在用最简单的方法去解决最大的问题&#xff0c;程序一旦开发出来满足了用户的需要&#xff0c;所带来的利益也很多。下面我们将从技术、操作、经济等方面来选择这个系统最终是否开发。 3.1.1技术…...

【Linux】动态库的制作与使用

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

Vue框架引入

vue简介 1.1.vue是什么?Vue官网 英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/ vue是一套构建用户界面的渐进式javascript框架 构建用户界面:将我们手里拿到的数据通过某种办法变成用户可以看见的界面前端工程师的职责:就是在合适的时候发出合适的请求,然后…...

贝叶斯估计(1):期末大乱炖

写在前面&#xff01; 1 先验分布和后验分布 三种信息&#xff1a;总体信息、样本信息、先验信息 总体信息&#xff1a;“总体是正态分布”&#xff1b;样本信息&#xff1a;总体抽取的样本提供的信息&#xff0c;是最新鲜的信息&#xff1b;先验信息&#xff1a;在抽样之前就…...

电脑找回彻底删除文件?四个实测效果的方法【一键找回】

电脑数据删除了还能恢复吗&#xff1f;可以的&#xff0c;只要我们及时撤销上一步删除操作&#xff0c;还是有几率找回彻底删除文件。 当我们的电脑文件被彻底删除后&#xff0c;尽管恢复的成功率可能受到多种因素的影响&#xff0c;但仍有几种方法可以尝试找回这些文件。本文整…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

深入解析 ReentrantLock:原理、公平锁与非公平锁的较量

ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类,用于实现线程同步,支持可重入性,并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...

深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

学习 Hooks【Plan - June - Week 2】

一、React API React 提供了丰富的核心 API&#xff0c;用于创建组件、管理状态、处理副作用、优化性能等。本文档总结 React 常用的 API 方法和组件。 1. React 核心 API React.createElement(type, props, …children) 用于创建 React 元素&#xff0c;JSX 会被编译成该函数…...