vue项目动态div滚动条滑动到指定位置效果

devtools/2025/1/23 8:57:08/

标题首先我们得明确几个知识点

element.scrollIntoView

this.$el.querySelector

文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项,则返回null。
用来匹配动态document

代码

// template部分
<div v-for="(item, index) in data" :key=index><div :test="item.test"><!--  你自己的内容 --><div>
</div>// js部分
const element = this.$el.querySelector(
`[test]="${item.test}"`
)
if(element) {element.scrollIntoView({behavior: 'smooth',block: 'center'
})
}

http://www.ppmy.cn/devtools/152834.html

相关文章

15天基础内容-1

day01 【前言、入门程序、常量】 主要内容 Java语言的发展历史【了解】 Java语言开发环境搭建【重点】 HelloWorld入门程序【重点】 注释和关键字【重点】 常量【重点】第一章 开发前言 1.1 Java语言概述【了解】 Java是一种高级编程语言&#xff0c;而且是面向对象的编程语…

安卓APP如何适配不同的手机分辨率

1 android是根据什么去选择drawable文件夹下的图片&#xff1f; 是根据drawable文件夹的修饰符进行选择的。 比如drawable、drawable-ldpi、drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawalbe-xxhdpi、drawable-xxxhdpi 根据修饰符进行优先匹配。 不同的dpi修饰符对应…

基于python+Django+mysql鲜花水果销售商城网站系统设计与实现

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育、辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

GDB相比IDE有什么优点

GDB(GNU Debugger)相比于集成开发环境(IDE)具有一些独特的优点,主要体现在其灵活性、可定制性和低级控制能力。具体来说,GDB有以下几个优点: 1. 轻量级且无依赖 GDB是一个命令行工具,不依赖于任何复杂的图形界面或大型库,这使得它非常适合在资源受限的环境中使用,比…

前k个高频元素力扣--347

目录 题目 思路 代码 题目 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2]示例 2: 输入: nums [1], k 1 输出: [1] 提示&#xff1a; 1 <…

PortSwigger靶场练习---网页 LLM 攻击:利用LLM API 的漏洞

网页 LLM 攻击&#xff1a; Exploiting vulnerabilities in LLM APIs 利用LLM API 的漏洞 PortSwigger靶场地址&#xff1a; Dashboard | Web Security Academy - PortSwigger 题目&#xff1a; 官方提示&#xff1a; 从实验室主页点击实时聊天。 询问LLM它有权访问哪些 API…

yolov11 推理保存json

目录 yolov11 推理保存json 推理图片目录: yolov11 推理保存json import glob import json import os import shutilimport cv2 import timeimport numpy as np import torch# import torch from ultralytics import YOLOmodel = YOLO(r"yolo11x.pt")dir_path = …

神经网络:什么是交叉熵?

在机器学习和深度学习中&#xff0c;交叉熵&#xff08;Cross Entropy&#xff09; 是一种常见的损失函数&#xff0c;特别适用于分类问题。尽管这个术语听起来可能有点复杂&#xff0c;但通过一个类比&#xff0c;我们可以更直观地理解它的含义和作用。 类比场景&#xff1a;…