当前位置: 首页 > 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;但仍有几种方法可以尝试找回这些文件。本文整…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...