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

js平滑滚动元素使其可见

直接上重点:

let xpath = "//*/div[@id='xxx']";
document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.scrollIntoView({ behavior: "smooth"})

这段代码是JavaScript中使用XPath查询文档并执行平滑滚动到找到的第一个匹配元素视图位置的操作。下面是对这段代码的逐部分解读:

document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null):

document.evaluate: 这是JavaScript DOM提供的一个方法,用于在文档中根据提供的XPath表达式查找节点。
xpath: 是一个字符串,表示XPath查询表达式,用于定位文档中的特定节点或节点集。
document: 指定在哪个文档对象中执行XPath查询,这里直接使用全局的document对象,代表当前页面的DOM。
null: 第三个参数通常用于指定XPath查询的命名空间 resolver,这里不需要,所以传入null。
XPathResult.FIRST_ORDERED_NODE_TYPE: 这是一个常量,指定查询结果类型。在这个情况下,它表示我们只关心第一个匹配的节点,并希望结果以单个节点的形式返回。
最后一个null参数是可选的,用于指定查询上下文节点,这里也不需要,所以也传入null。
.singleNodeValue: 调用上述evaluate方法返回的是一个XPathResult对象。当请求的结果类型是FIRST_ORDERED_NODE_TYPE时,可以使用singleNodeValue属性来获取查询到的单一节点。如果查询没有结果,这个属性会返回null。

.scrollIntoView({ behavior: “smooth”}):

这是调用找到的节点上的scrollIntoView方法,目的是使该元素在视口中变得可见。
{ behavior: “smooth”} 是一个选项对象,指定了滚动行为。在这里,"smooth"意味着滚动应该是平滑的动画效果,而不是瞬间跳转。如果不提供这个对象或者设置为{ behavior: “auto”},则浏览器可能会采用默认的滚动行为,这取决于浏览器的具体实现和用户设置,可能表现为瞬时滚动或平滑滚动。
综上所述,整段代码的作用是:使用XPath表达式在当前文档中查找指定的元素,然后平滑地滚动页面,确保该元素出现在视图中。这是一种在现代Web开发中常用的动态交互技术,能提升用户体验。

当然你也可以用于selenium中,直接用driver执行这段js代码使得需要下拉的元素可见。不过大部分下拉框中的元素不需要可见就可以模拟点击操作,所以这步没必要,不过还是提供了这方面的能力,也许有些场景需要吧

http://www.lryc.cn/news/365383.html

相关文章:

  • TP6 事件绑定、监听、订阅
  • SpringCloud Gateway中Filters详细说明
  • 力扣2156.查找给定哈希值的子串
  • 推荐低成本低功耗的纯数字现场可重构IC
  • 解决change事件与blur事件互不影响
  • 后端开发面经系列 -- 同程旅行C++一面
  • 推荐几个开源的c#的工作流引擎组件
  • 视频汇聚EasyCVR视频监控云平台对接GA/T 1400视图库对象和对象集合XMLSchema描述
  • 【JavaScript脚本宇宙】瞬息万变:探索实时Web应用的JavaScript库
  • Java数据结构与算法(有向无环图)
  • QuanTA: 一种新的高秩高效微调范式
  • 【漏洞复现】用友NC downCourseWare 任意文件读取漏洞
  • 度安讲 | 第二期「安全左移·业务护航」技术沙龙成功举办
  • 代码片段 | Matlab三维图显示[ R T 0 1] 的最佳方法
  • 2024百度之星 跑步
  • 【git】TortoiseGitPlink Fatal Error 解决方法
  • 行心科技|中科利众:健康科技新合作,营养与科技融合前行
  • Xcode 打包报错Command PhaseScriptExecution failed with a nonzero exit code
  • 使用 IPSET 添加 CDN 节点 IP(IPv4/IPv6)到防火墙白名单
  • oracle trim 函数很慢,加trim以后执行超慢,执行计划求解
  • 【Leetcode Python】
  • Ubuntu系统的k8s常见的错误和解决的问题
  • Scala学习笔记7: 对象
  • 【Linux】进程切换环境变量
  • 嵌入式学习记录6.6(拷贝构造/友元函数/常成员函数)
  • 宝塔 nginx 配置负载均衡 upstream
  • idea 插件推荐
  • 【Linux】Linux环境基础开发工具_5
  • Java Web学习笔记15——DOM对象
  • 中电联系列一:rocket手把手教你理解中电联协议!