查找dom，使其滚动到视野范围内

最新推荐文章于 2023-08-21 20:30:15 发布

原创最新推荐文章于 2023-08-21 20:30:15 发布 · 543 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

个人经验专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种方法，通过遍历树形结构并使用JavaScript的`querySelector()`和`scrollIntoView()`来查找并定位含有特定字符的节点，使其在页面中可见。该技术适用于网页上的搜索功能，能帮助用户快速定位到目标内容。

解决办法：使节点滚动到视野范围内的api

element.scrollIntoView()

问题场景：在一颗树上检索字符，并定位到字符所在位置。
在这里插入图片描述
解决思路：给遍历树，给包含检索字符的节点添加一个类class，再使用querySeletor()找到包含这类的节点，最后使用scrollIntoView()使其滚动到可视区域。

var search=this.$el.querySelector('.search').scrollIntoView()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

简单的chen

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Python爬虫(11)】从入门到精通：CSS选择器在Python爬虫中的深度解析（豆瓣电影实例）

邓邓子的博客

02-17

1893

CSS 选择器是 CSS（层叠样式表）中用于选择 HTML 文档中元素的一种模式，它在网页样式控制中起着核心作用。通过 CSS 选择器，开发者可以精确地指定哪些 HTML 元素应该应用特定的样式规则，从而实现对网页外观的细致控制，比如改变文本颜色、字体大小、背景颜色、元素布局等。在 Python 爬虫领域，CSS 选择器同样是一种强大的工具，用于在 HTML 或 XML 文档中定位和提取所需的数据。

判断dom元素是否滚动到底、是否在可视区域

m0_45093055的博客

05-27

1459

此篇文章主要是针对特定场景加深对scrollTop、clientHeight、scrollHeight、getBoundingClientRect()等属性的认识，实际场景以上的方案可能并非最佳，比如判断dom元素是否滚动到底，可以使用IntersectionObserver浏览器api.IntersectionObserver监听滚动事件虚拟列表的最佳尝试可以使用requestAnimationFrame浏览器api，requestAnimationFrame用法解析。

参与评论您还未登录，请先登录后发表或查看评论

让DOM元素自动滚到视野内ScrollIntoView

weixin_30625691的博客

07-05

471

概述项目中需要把一个DOM元素自动滚动到视野内，百思不得其解，最后再element库里面发现了这个方法，记录下来供以后开发时参考，相信对其他人也有用。参考资料：element scroll-into-view.js 代码代码如下： /* eslint-disable no-param-reassign */ export default function scrollIntoView(con...

把DOM移到可视页面里

每个人为不同的理由带着面具说谎，动机也只有一种名字那叫做欲望

07-06

269

遇到问题：在用antd的时候使用Tree搜索时，没法把节点移到可视的页面中。解决办法 //...省略树的搜索 this.setState({ searchCard:{ cardKey :this.state.searchCard.cardKey+1, selectedKey:item.data.funcId, expandKeys:expandKeys, } },()=>{ setTimeout(()=>{ let tree = document.getEleme.

DOM——文件对象模型（缓动动画、让窗口滚动到指定位置、页面滚动的距离、窗口的可视区域尺寸、元素的几何尺寸、表单操作、媒体和图形编程）

qq_52301431的博客

07-21

716

left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离height和width属性老版本IE并未实现。window.pageXOffset/window.pageYOffset//bom操作，IE8及IE8以下不兼容document.body.scrollLeft/scrollTop。//可区分标准模式与否。//标准模式下(......

让当前的元素滚动到浏览器窗口的可视区域内

Wangdanting123的博客

02-13

1855

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView document.getElementById("abc").scrollIntoView({ behavior: "smooth", block: "start" }); 在window.scrollTop不起作用的时候可以尝试这个。缺点是浏览器...

scroll-into-view：实现元素自动滚动到可视区域

into-view` 库则通过遍历 DOM 向上查找所有具有滚动能力的父级元素（即“滚动父对象”），依次计算并触发它们的 `scrollTop` 和 `scrollLeft` 调整，实现多层级协同滚动，确保目标元素最终出现在用户视野范围内。...

DrissionPage查找到<td>元素却不能点击

最新发布

02-25

可以通过滚动条调整使目标区域进入视野范围内，并设置合理的延时让浏览器有足够的时间去准备这个组件。代码如下所示： ```python from time import sleep # 假设已经获取到了 td_element 对象 browser.execute_...

基于Vue-EPG的IPTV项目焦点控制与滚动同步方案

为此，Vue-EPG结合了智能滚动机制，在焦点即将移出可视区域时，自动触发页面或容器的滚动动作，使目标元素平滑地进入视野。这通常是通过监听页面滚动事件、监听焦点变化事件，并调用element.scrollIntoView()方法或...

视图容器与滚动行为的博弈：深入理解scroll-view在外卖场景的应用

![视图容器与滚动行为的博弈：深入理解scroll-view在外卖场景的应用]...本文系统阐述了scroll-view的理论机制，涵盖其结构

查找DOM节点的方式

weixin_63712639的博客

02-25

1257

1.固定节点查找头部:document.head 身体:document.body 整个HTML:docment.documentElement 2.按照元素关系查找所有子元素:children 第一个子元素:firstElementChild 最后一个子元素:lastElementChild 父元素:parentElement 上一个兄弟元素:previou...

实现将元素滚动到用户可见位置

weixin_50336510的博客

09-01

624

【需求】当用户收到消息时，点击消息可以跳转到列表中消息所在的位置，如下图【实现思路】当消息6跳转时，路由携带id到列表页（前提是消息6与消息6详情有相同的id）。通过id使得消息6与其详情做匹配，在详情页通过getBoundingClientRect()方法,获取消息6详情的位置后，并通过DOM元素的scrollTo方法使页面滚动到该位置。【实现代码】一、消息6跳转时路由携带id this.$router.push({ path: '/messDetail',

javascript中DOM扩展

weixin_47450807的博客

03-09

444

javascript中DOM扩展一、selectors API document.querySelector() 其中可以是标签名，类名，id名。 document.querySelectorAll() 其中也可以传入标签名，类名，id名。其最终传出的是一个HTMLCollection,是一个类数组。所以可以对其进行遍历。 //三种遍历方式 for(let i = 0 ;i<div.length;i++){ div[i].className = "name"; }

让视野外html元素显示在视野中

winjo的博客

11-06

1690

对于滚动条外的元素有时我们需要让其自动进入视野范围内，比如聊天界面，每发过来一条消息，让最新消息显示在视野内，或者点击按钮，要看到对应的内容。对于一般文档内容，可能直接在元素上设置个id，然后利用链接跳转功能就可实现，如：<a href="#about">about</a>但对于一个元素的内容，如何其在滚动条外如何做呢？有两种简单的方法

scrollIntoView使用教程：让页面滚动到指定元素的可见区域

热门推荐

每天都要努力学习哦~~

07-05

2万+

scrollIntoView是一个DOM元素的方法，它可以将当前元素滚动到浏览器窗口的可见区域内。该方法有一些可选参数，可以用来控制滚动的行为。总结一下，scrollIntoView是一个非常实用的JavaScript方法，可以帮助我们实现页面滚动的交互效果。它可以在点击事件或其他交互事件中调用，将指定的元素滚动到浏览器窗口的可视区域内。除了基本的滚动功能，scrollIntoView方法还支持一些配置选项，可以实现平滑滚动和对齐方式的调整。希望本文对你理解和使用scrollIntoView方法有所帮助。

DOM获取元素、窗口滚动、可视区域

gyutdcu的博客

08-21

917

DOM获取元素的方法

js实现指定dom元素滚动到可视窗口

qq_39192395的博客

07-13

1170

js实现指定dom元素滚动到可视窗口

js中的简单DOM操作

wdtn5656的博客

10-21

4300

js中的简单DOM操作&操作元素样式&操作元素的属性&操作元素的类名& 操作元素的内容&节点&获取可视窗口的尺寸&获取元素偏移值的方式&获取元素尺寸

vue如何监听dom元素滚动到了可视区？

贝贝的博客

12-26

3424

vue如何监听dom元素滚动到了可视区？场景：当某个元素滚动到可视区时，为其添加动画样式(animate.css)。 common/utils.js export const isElementNotInViewport = function(el) { if (el) { let rect = el.getBoundingClientRect(); return ( rect.top >= (window.innerHeight || document.document

ReactScrollTo组件实现页面滚动到指定位置

该组件的核心作用是通过编程方式将页面或某个可滚动容器内的视图滚动到指定的目标位置，例如某个 DOM 元素、特定的坐标点，或者根据锚点跳转。它解决了传统 HTML 锚点跳转生硬、无动画过渡的问题，并增强了用户在长...