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

处理元素卡在视野边界,滚动到视野内

 效果图如下:

 

本示例处理场景:点击底部的折叠面板,展开后移动端滚动条位置不变,导致展开内容在视图外。造成面板展开无内容的错觉。

处理核心API: IntersectionObserver

此API可绑定元素并监听元素是否在视野内。若在视野外​​​​​​​则使用scrollIntoView将元素滚动到可视区域内。

 handleCollapseItemIntoView (form) {if (form.isActive) {const formHeaderEl = form.$el.querySelector('.el-collapse-item__header')var options = {root: domTools.getScrollParent(form.$el),//根元素————滚动条所在元素,以便操作滚动条rootMargin: '0px 0px -20px 0px',//根元素判定是否在视野内的Margin设置}const intersectionObserver = new IntersectionObserver((entries) => {const ratio = entries[0].intersectionRatio// 如果 intersectionRatio 为 0,则目标在视野外,if (ratio <= 0) {intersectionObserver.unobserve(formHeaderEl)return}if (ratio < 1) {formHeaderEl.scrollIntoView({ behavior: 'smooth', block: 'center' })}}, options)// 等待面板渲染完成,高度变化再开启监听(内部数据为异步加载)setTimeout(() => {intersectionObserver.observe(formHeaderEl)}, 300)}},

相关文章:

处理元素卡在视野边界,滚动到视野内

效果图如下&#xff1a; 本示例处理场景&#xff1a;点击底部的折叠面板&#xff0c;展开后移动端滚动条位置不变&#xff0c;导致展开内容在视图外。造成面板展开无内容的错觉。 处理核心API: IntersectionObserver 此API可绑定元素并监听元素是否在视野内。若在视野外​​​…...

环,域,体,整区,理想,极大理想,

环&#xff1a; 定义&#xff1a; 加法交换群 乘法半群 分配律 域的定义&#xff1a; 加法交换群 乘法群&#xff08;去掉0元是交换群&#xff09; 分配律 Eg:比如整数集合不是域&#xff0c;因为对于乘法来说&#xff0c;去掉0后没有单位元了&#xff0c;但是是环 Eg…...

音视频入门基础:MPEG2-TS专题(22)——FFmpeg源码中,获取TS流的音频信息的实现

音视频入门基础&#xff1a;MPEG2-TS专题系列文章&#xff1a; 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;1&#xff09;——MPEG2-TS官方文档下载 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;2&#xff09;——使用FFmpeg命令生成ts文件 音视频入门基础…...

大模型—Ollama 结构化输出

Ollama 结构化输出 Ollama现在支持结构化输出,使得可以按照由JSON模式定义的特定格式来约束模型的输出。Ollama的Python和JavaScript库已经更新,以支持结构化输出。 结构化输出的用例包括: 从文档中解析数据从图像中提取数据结构化所有语言模型响应比JSON模式更可靠和一致开…...

基于Pytorch和yolov8n手搓安全帽目标检测的全过程

一.背景 还是之前的主题&#xff0c;使用开源软件为公司搭建安全管理平台&#xff0c;从视觉模型识别安全帽开始。主要参考学习了开源项目 https://github.com/jomarkow/Safety-Helmet-Detection&#xff0c;我是从运行、训练、标注倒过来学习的。由于工作原因&#xff0c;抽空…...

数据结构与算法基础(C语言版)

参考资料&#xff1a;https://www.bilibili.com/video/BV1GW421A7qY/ 所有代码均已在Ubuntu 20.04.6 LTS中测试通过 逻辑结构与存储结构 逻辑结构 逻辑结构指的是数据对象中数据元素间的相互关系&#xff0c;分为以下四种&#xff1a; 集合结构 集合结构中的数据元素除了同属于…...

Qt监控系统放大招/历经十几年迭代完善/多屏幕辅屏预览/多层级设备树/网络登录和回放

一、前言说明 近期对视频监控系统做了比较大的更新升级&#xff0c;主要就是三点&#xff0c;第一点就是增加了辅屏预览&#xff0c;这个也是好多个客户需要的功能&#xff0c;海康的iVMS-4200客户端就有这个功能&#xff0c;方便在多个屏幕打开不同的视频进行查看&#xff0c…...

使用Locust对MySQL进行负载测试

1.安装环境 pip install locust mysql-connector-python 2.设置测试环境 打开MySQL服务 打开Navicat新建查询&#xff0c;输入SQL语句 3.编写locust脚本 load_mysql.py # codingutf-8 from locust import User, TaskSet, task, between import mysql.connector import ran…...

layui多图上传,tp8后端接收处理

环境&#xff1a;layui2.9.21\thinkphp8.1 前端代码&#xff1a; layui.use([upload, layer], function() {const upload layui.upload;const layer layui.layer;const $ layui.$;// 上传图片const uploadInstImage upload.render({elem: #uploadImage,url: /admin/demo/…...

【Rust自学】8.3. String类型 Pt.1:字符串的创建、更新与拼接

8.3.0. 本章内容 第八章主要讲的是Rust中常见的集合。Rust中提供了很多集合类型的数据结构&#xff0c;这些集合可以包含很多值。但是第八章所讲的集合与数组和元组有所不同。 第八章中的集合是存储在堆内存上而非栈内存上的&#xff0c;这也意味着这些集合的数据大小无需在编…...

Linux(Ubuntu)下ESP-IDF下载与安装完整流程(1)

本文主要看参考官网说明,如下: 快速入门 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 Linux 和 macOS 平台工具链的标准设置 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 一、安装准备 为了在ESP32-S3中使用ESP-IDF,需要根据操作系统安装一些软件包。可以参考以下安…...

Android性能优化—— 内存优化

Android 系统中&#xff0c;垃圾回收是自动的&#xff0c;比较隐蔽&#xff0c;这就导致一些内存问题表现的并不明显&#xff0c;出现问题后难以定位。常见的内存问题有内存泄漏、内存溢出&#xff08;Out of Memory&#xff09;、内存抖动等。 我们做内存优化的主要原因有以下…...

【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算

【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算 一、简介 在MATLAB中计算Sobol二阶效应指数通常涉及到全局敏感性分析&#xff08;Global Sensitivity Analysis, GSA&#xff09;&#xff0c;其中Sobol方法是一种流行的技术&#xff0c;用于评估模型输入…...

【Scala】图书项目系统代码演练3.1/BookService

package org.app package serviceimport models.{BookModel, BorrowRecordModel}import org.app.dao.{BookDAO, BorrowRecordDAO}import java.time.LocalDateTime import scala.collection.mutable.ListBuffer// 图书业务逻辑层 class BookService {private val bookDAO new B…...

Gateway

目录 使用 工作机制 Predicate断言 Filter过滤器&#xff08;鉴权&#xff09; GatewayFilter GlobalFilter 使用 Gateway底层是使用Ribbon来实现负载均衡的 新建模块&#xff0c;端口5001 1、引入依赖 spring-boot-starter-web里存在tomcat&#xff0c;spring-cloud-st…...

SpringSecurity中的过滤器链与自定义过滤器

关于 Spring Security 框架中的过滤器的使用方法,系列文章: 《SpringSecurity中的过滤器链与自定义过滤器》 《SpringSecurity使用过滤器实现图形验证码》 1、Spring Security 中的过滤器链 Spring Security 中的过滤器链(Filter Chain)是一个核心的概念,它定义了一系列过…...

【OTA】论文学习笔记--《基于RTOS的车载ECU双分区OTA升级技术分析报告》

引言 研究背景 - 汽车智能化、网联化发展趋势下,OTA升级已成为智能网联汽车的必备功能 - 传统RTOS控制器在OTA升级失败后无法进行软件回滚,导致控制器功能失效 - 现有技术主要针对Linux、QNX等智能操作系统,缺乏针对RTOS的解决方案 研究目的 提出一种适用于RTOS控制器的双分…...

MLA:多头潜在注意力

MLA:多头潜在注意力 多头潜在注意力(MLA)机制是一种在深度学习模型中用于处理序列数据的注意力机制的改进形式,以下是对其原理和示例的详细介绍: 原理 低秩键值联合压缩:MLA机制利用低秩键值联合压缩来消除注意力模块中的某些计算,从而提高模型的运行速度和性能。在传…...

【python】matplotlib(moon cake)

文章目录 1、Style12、Style23、Style34、Style45、Style56、Style67、Style78、参考的库函数matplotlib.patches.Arcmatplotlib.patches.Wedge 9、参考 1、Style1 """ author: tyran """from numpy import sin, cos, pi import matplotlib.pyp…...

C++ hashtable

文章目录 1. 基本概念2. 哈希函数3. 哈希冲突及解决方法开放定址法链地址法再哈希法建立公共溢出区4. 哈希表的操作实现5. 内存管理及优化 时间复杂度理想情况&#xff08;无哈希冲突或冲突极少&#xff09;一般情况&#xff08;考虑哈希冲突及解决方法&#xff09;综合来看 以…...

ip怎么查域名?IP和域名分别是什么?

为什么我们可以通过简单的域名访问网站&#xff0c;而不是记住一串复杂的数字&#xff1f;IP地址和域名之间到底是什么关系&#xff1f;在互联网的世界里&#xff0c;IP地址和域名是两种重要的概念&#xff0c;它们共同构成了我们日常上网的基础。 IP地址是互联网协议地址的缩…...

大模型提示词初探

大模型提示词初探 在与大模型交互的过程中&#xff0c;提示词起着至关重要的作用&#xff0c;它犹如给模型下达的精准任务指令&#xff0c;直接影响着模型生成内容的准确性、高效性与合理性。合理运用提示词&#xff0c;能够有效减少模型出现错误和幻觉的情况&#xff0c;从而…...

Linux的进程替换以及基础IO

进程替换 上一篇草率的讲完了进程地址空间的组成结构和之间的关系&#xff0c;那么我们接下来了解一下程序的替换。 首先&#xff0c;在进程部分我们提过了&#xff0c;其实文件可以在运行时变成进程&#xff0c;而我们使用的Linux软件其实也是一个进程&#xff0c;所以进一步…...

《Vue进阶教程》第三十一课:ref的初步实现

往期内容&#xff1a; 《Vue进阶教程》第二十课&#xff1a;lazy懒执行 《Vue进阶教程》第二十一课&#xff1a;支持缓存 《Vue进阶教程》第二十二课&#xff1a;自定义更新(调度器) 《Vue进阶教程》第二十三课&#xff1a;渲染计算属性的结果 《Vue进阶教程》第二十四课&…...

Wend看源码-Java-集合学习(Queue)

概述 Wend看源码-Java-集合学习(List)-CSDN博客 Wend看源码-Java-集合学习(Set)-CSDN博客 在前两篇文章中&#xff0c;我们分别探讨了Java集合框架的父类以及List集合和Set集合的实现。接下来&#xff0c;本文将重点阐述Java中的Queue集合&#xff0c;包括其内部的数据结…...

大数据面试笔试宝典之HBase面试

1.HBase 数据存储位置 HBase 中的数据存储在哪里? 以什么格式存储?和 Zookeeper 什么关系? 参考答案: 1.HBase 中的所有数据文件都存储在 Hadoop HDFS 文件系统上。 2.包含两种文件类型: HFile : HBase 中 KeyValue 数据的存储格式。HFile 是 Hadoop 的二进制格式文件…...

React基础知识学习

学习React前端框架是一个系统而深入的过程&#xff0c;以下是一份详细的学习指南&#xff1a; 一、React基础知识 React简介 React是一个用于构建用户界面的JavaScript库&#xff0c;由Facebook开发和维护。它强调组件化和声明式编程&#xff0c;使得构建复杂的用户界面变得更…...

实战指南:Shiro、CAS打造完美单点登录体验

引言 想象一下&#xff0c;在日常工作中&#xff0c;我们经常需要进行系统认证和授权。当用户尝试登录一个网站时&#xff0c;他们需要提供用户名和密码&#xff0c;网站会检查这些信息&#xff0c;确认用户是谁。这就是认证的过程。 一旦用户被认证&#xff0c;他们可能会尝…...

光储充一体化解决方案详解。

一、光储充介绍 1、什么是光储充 “光储充”一体化&#xff0c;顾名思义&#xff0c;是由光伏发电、储能、充电集成一体、互相协调支撑的绿色充电模式。其工作原理是利用光伏发电&#xff0c;余电由储能设备存储&#xff0c;共同承担供电充电任务。在用电高峰&#xff0c;光储…...

TDengine 新功能 VARBINARY 数据类型

1. 背景 VARBINARY 数据类型用于存储二进制数据&#xff0c;与 MySQL 中的 VARBINARY 数据类型功能相同&#xff0c;VARBINARY 数据类型长度可变&#xff0c;在创建表时指定最大字节长度&#xff0c;使用进按需分配存储&#xff0c;但不能超过建表时指定的最大值。 2. 功能说明…...

2024年秋词法分析作业(满分25分)

【问题描述】 请根据给定的文法设计并实现词法分析程序&#xff0c;从源程序中识别出单词&#xff0c;记录其单词类别和单词值&#xff0c;输入输出及处理要求如下&#xff1a; &#xff08;1&#xff09;数据结构和与语法分析程序的接口请自行定义&#xff1b;类别码需按下表格…...

AF3 checkpoint_blocks函数解读

checkpoint_blocks 函数实现了一种分块梯度检查点机制 (checkpoint_blocks),目的是通过分块(chunking)执行神经网络模块,减少内存使用。在深度学习训练中,梯度检查点(activation checkpointing)是一种显存优化技术。该代码可以: 对神经网络的块(blocks)按需分块,并对…...

VITUREMEIG | AR眼镜 算力增程

根据IDC发布的《2024年第三季度美国AR/VR市场报告》显示&#xff0c;美国市场AR/VR总出货量增长10.3%。其中&#xff0c;成立于2021年的VITURE增长速度令人惊艳&#xff0c;同比暴涨452.6%&#xff0c;成为历史上增长最快的AR/VR品牌。并在美国AR领域占据了超过50%的市场份额&a…...

详解MySQL在Windows上的安装

目录 查看电脑上是否安装了MySQL 下载安装MySQL 打开MySQL官网&#xff0c;找到DOWNLOADS 然后往下翻&#xff0c;找到MySQL Community(GPL) Downloads>> 然后找到MySQL Community Server 然后下载&#xff0c;选择No thanks,just start my download. 然后双击进行…...

细说STM32F407单片机CAN基础知识及其HAL驱动程序

目录 一、CAN总线结构和传输协议 1、 CAN总线结构 &#xff08;1&#xff09;闭环结构的CAN总线网络 &#xff08;2&#xff09;开环结构的CAN总线网络 &#xff08;3&#xff09;隐性电平和显性电平 2、CAN总线传输协议 &#xff08;1&#xff09;CAN总线传输特点 &am…...

Ubuntu 22.04 升级 24.04 问题记录

一台闲置笔记本使用的 ubuntu 还是 18.04&#xff0c;最近重新使用&#xff0c;发现版本过低&#xff0c;决定升级&#xff0c;于是完成了 18.04 -> 20.04 -> 22. 04 -> 24.04 的三连跳。 一、升级过程中黑屏 主要问题是在 22.04 升级到 24.04 过程中出现了黑屏仅剩…...

模型选择+过拟合欠拟合

训练误差和泛化误差 训练误差&#xff1a;模型在训练数据上的误差 泛化误差&#xff1a;模型在新数据上的误差 验证数据集&#xff1a;一个用来评估模型好坏的数据集 例如拿出50%的数据作为训练 测试数据集&#xff1a;只能用一次 K则交叉验证 在没有足够数据时使用 算法…...

Leetcode 3404. Count Special Subsequences

Leetcode 3404. Count Special Subsequences 1. 解题思路2. 代码实现 题目链接&#xff1a;3404. Count Special Subsequences 1. 解题思路 这道题是事实上这次的周赛最难的一道题目&#xff0c;不过也是有点巧思在内。 最开始我的想法就是按照乘积构成pair&#xff0c;然后…...

萌萌哒的八戒

萌萌哒的八戒 下载压缩包后&#xff0c;打开发现有一张照片 既然是关于猪的&#xff0c;那就用猪圈密码解码 flag{whenthepigwanttoeat}...

开启家具组装新方式:产品说明书智能指导

在快节奏的现代生活中&#xff0c;人们越来越追求便捷与高效。无论是新房装修还是家具换新&#xff0c;家具组装已成为许多家庭不可避免的一项任务。然而&#xff0c;面对复杂多变的家具图纸和冗长的产品说明书&#xff0c;许多人常常感到无从下手&#xff0c;甚至因操作不当而…...

【连续学习之ResCL算法】2020年AAAI会议论文:Residual continual learning

1 介绍 年份&#xff1a;2020 会议&#xff1a; AAAI Lee J, Joo D, Hong H G, et al. Residual continual learning[C]//Proceedings of the AAAI Conference on Artificial Intelligence. 2020, 34(04): 4553-4560. 本文提出的算法是Residual Continual Learning (ResC…...

【网络协议】路由信息协议 (RIP)

未经许可&#xff0c;不得转载。 路由信息协议&#xff08;Routing Information Protocol&#xff0c;简称 RIP&#xff09;是一种使用跳数&#xff08;hop count&#xff09;作为路由度量标准的路由协议&#xff0c;用于确定源网络和目标网络之间的最佳路径。 文章目录 什么是…...

Linux 终端查看 nvidia 显卡型号

文章目录 写在前面1. 需求描述2. 实现方法方法一&#xff1a;方法二方法三&#xff1a; 参考链接 写在前面 自己的测试环境&#xff1a; Ubuntu20.04 1. 需求描述 Linux 终端查看 nvidia 显卡型号 2. 实现方法 方法一&#xff1a; 执行下列指令&#xff1a; sudo update…...

基于neurokit2的心电仿真数据生成实例解析

一 概念 NeuroKit2是一个开源的、社区驱动的、以用户为中心的Python库&#xff0c;可用于多种生理信号的分析处理&#xff08;例如ECG、PPG、EDA、EMG、RSP&#xff09;&#xff0c;还包括用于特定处理步骤&#xff08;如频率&#xff09;的工具提取和过滤方法&#xff0c;并在…...

AMBA-APB

目录 1.APB 协议 2.APB信号列表 3.数据传输 3.1写传输&#xff08;2种&#xff09; 3.1.1 无等待状态的写传输 3.1.2有等待状态的写传输 3.2写选通信号 (PSTRB) 字节通道映射 3.3读传输&#xff08;2种&#xff09; 3.3.1 无等待状态的读传输 3.3.2有等待状态的读传…...

网安入门之PHP后端基础

PHP 基本概念详解 PHP是一种服务器端脚本语言&#xff0c;常用于动态网站开发和 web 应用程序。以下是 PHP 的基本概念与特点的详细说明&#xff1a; 1. PHP 文件的默认文件扩展名 PHP 文件的扩展名通常为 .php&#xff0c;例如 index.php。PHP 文件可以包含 PHP 代码、HTML…...

windows系统安装完Anaconda之后怎么激活自己的虚拟环境并打开jupyter

1.在win主菜单中找到Anaconda安装文件夹并打开终端 文件夹内有所有安装后的Anaconda的应用软件和终端窗口启动窗口 点击Anaconda Prompt&#xff08;Anaconda&#xff09;就会打开类似cmd的命令终端窗口&#xff0c;默认打开的路径是用户名下的路径 2.激活虚拟环境 使用命令…...

【C#特性整理】C#特性及语法基础

1. C#特性 1.1 统一的类型系统 C#中, 所有类型都共享一个公共的基类型. 例如&#xff0c;任何类型的实例都可以通过调用ToString方法将自身转换为一个字符串 1.2 类和接口 接口: 用于将标准与实现隔离, 仅仅定义行为,不做实现. 1.3 属性、方法、事件 属性: 封装了一部分对…...

龙蜥 配置本地yum源8.6----亲测

系统版本: 说明:丫丫的,内网服务安装了个龙蜥操作系统。内网不能访问互联网,所以就需要挂载yum源 用的以前的方法挂载,一直报错 [Couldnt open file /mnt/anolisos/repodata/repomd.xml] yum挂载的时候报错,奇葩!!!,龙蜥的挂载方法好像不一样。 解决: 一、上传并挂…...

Xshell日志录制

步骤 1&#xff1a;设置日志文件位置 打开 Xshell 软件&#xff0c;选择目标会话&#xff08;或者创建一个新的会话&#xff09;。右键点击会话名称&#xff0c;选择“属性”。在会话属性窗口中&#xff0c;找到“日志”选项卡。勾选“启用日志记录”。在“文件名”中设置日志…...