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

最新推荐文章于 2024-05-27 17:10:53 发布

简单的chen

最新推荐文章于 2024-05-27 17:10:53 发布

阅读量453

点赞数

分类专栏：个人经验文章标签： javascript

本文链接：https://blog.csdn.net/Dawnchen1/article/details/124282945

版权

JavaScript DOM操作搜索定位 scrollIntoView 节点定位

关键词由CSDN通过智能技术生成

个人经验专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

element.scrollIntoView()

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

简单的chen

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

elementUI滚动条,点击dom元素滚动到指定位置

qq_57094383的博客

11-30

1678

el-scrollbar的点击item滚动效果

dom元素滚动条滚动控制详解

神的孩子的博客

05-25

2358

前言不知道大家有没有遇到过这样的需求，在某个dom元素中添加新的子元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要自动滚动到新添加的子元素的位置，如下图所示效果：那么接下来我们一边学习一些dom元素滚动相关的知识点，一边实现一个上图的效果和一些其他滚动相关的功能。需要了解的dom属性和方法 scrollTop、clientHeight和scrollHeight scrollTop属性是一个描述容器元素内容的top值与容器元素(viewport)视口顶部top值之间的差值，即容器中内容向上

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

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

weixin_30625691的博客

07-05

423

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

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

最新发布

m0_45093055的博客

05-27

1079

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

把DOM移到可视页面里

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

07-06

208

遇到问题：在用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

608

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

1805

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

html中dom元素滚动条滚动控制小结详解

11-20

不知道大家有没有遇到过这样的需求，在某个 dom 元素中添加新的子元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要自动滚动到新添加的子元素的位置，如下图所示效果：那么接下来我们一边学习一些 ...

dom元素滚动条高度 js_js获取元素的滚动高度，和距离顶部的高度

weixin_39827036的博客

12-22

2001

jq：获取浏览器显示区域(可视区域)的高度：$(window).height();获取浏览器显示区域(可视区域)的宽度：$(window).width();获取页面的文档高度$(document).height();获取页面的文档宽度：$(document).width();浏览器当前窗口文档body的高度：$(document.body).height();浏览器当前窗口文档body的宽度...

vue DOM滚动事件，获取DOM滚动条距离DOM底部的距离

LILEILEILOVE的博客

12-05

1465

<ul @scroll.passive = 'scroll(e)' style="height:200px;overflow:auto;"> <li>aaaa</li> </ul> scroll(e){ let scrollBottom = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight; if(scrollBottom < 10){ console.log("滚

查找DOM节点的方式

weixin_63712639的博客

02-25

1177

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

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

weixin_50336510的博客

09-01

508

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

javascript中DOM扩展

weixin_47450807的博客

03-09

303

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

1540

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

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

热门推荐

每天都要努力学习哦~~

07-05

1万+

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

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

qq_39192395的博客

07-13

1090

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

js中的简单DOM操作

wdtn5656的博客

10-21

3329

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

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

贝贝的博客

12-26

3300

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

js如何操作dom滚动到可视区域？

Dark_programmer的博客

01-25

3735

关于滚动，肯定要内部容器宽 or 高大于外部容器才会发生滚动。那么如何在组件加载之后，就自动将想看到的指定内容滚动到可视区域呢？（如过指定内容初始被隐藏）知识点：【scrollIntoView】 scrollIntoView()是有一些参数的，详情可参考⬆️ scrollIntoView() 方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。语法： element.scrollIntoView(); // 等同于element.scrollIntoView(tru