Element.scrollIntoView() 和 document.elementFromPoint ()
Element.scrollIntoView()
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 /* alignToTop: 一个Boolean值: 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。 相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。 这是这个参数的默认值。 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。 相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。 */
Document.elementFromPoint(x, y)
demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } ul, li { margin: 0; padding: 0; list-style-type: none; } .list-content { width: 100%; position: relative; font-size: 14px; } .sublist-alphabet { position: fixed; width: 14px; right: 14px; top: 28px; } .sublist-alphabet li { width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; margin: 5px 0; } .main-content li { width: 100%; margin: 10px; font-size: 16px; } .main-content li div { width: 100%; height: 20px; line-height: 20px; } .main-content li div ~ div { border-top: 1px solid red; } .sublist-alphabet .active { color: rgb(235, 17, 119); background-color: #ccc; } .main-content .active { background-color: aqua; } </style> </head> <body> <div class="list-content"> <!-- 字母表 --> <ul class="sublist-alphabet"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> </ul> <!-- 内容列表 --> <ul class="main-content"> <li> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> </li> <li data-type="b"> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> </li> <li data-type="c"> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> </li> <li data-type="d"> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> </li> <li data-type="e"> <div>eeeeeeeeeeeeeeeee1</div> <div>eeeeeeeeeeeeeeeee2</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee1</div> <div>eeeeeeeeeeeeeeeee2</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> </li> <li data-type="f"> <div>fffffffffffffffff1</div> <div>fffffffffffffffff2</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> </li> <li data-type="g"> <div>ggggggggggggggggg1</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg3</div> </li> </ul> </div> <script> let list = document.querySelectorAll('.sublist-alphabet li') let contentList = document.querySelectorAll('.main-content li') list.forEach((item, index) => { list[index].onclick = () => { const lastIndex = sessionStorage.getItem('lastIndex') || '' if(lastIndex) { contentList[lastIndex].classList.remove('active') list[lastIndex].classList.remove('active') } contentList[index].scrollIntoView(true) contentList[index].classList.add('active') list[index].classList.add('active') sessionStorage.setItem('lastIndex', index) } }) </script> </body> </html>
Element.scrollIntoView() 和 document.elementFromPoint ()的更多相关文章
- Element.scrollIntoView()
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); element.scrollIntoView( ...
- js的Element.scrollIntoView的学习
1.Element.scrollIntoView() 该方法让当前元素滚动到浏览器窗口的可是区域内: 2.语法: element.scrollIntoView();//等同于element.sc ...
- document.elementFromPoint在IE8下无法稳定获取当前坐标元素的解决方法
document.elementFromPoint(e.clientX, e.clientY) document.elementFromPoint(e.clientX, e.clientY) 执行2次 ...
- 元素在当前窗口可视的区域---Element.scrollIntoView()
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // ...
- cvc-elt.1: Cannot find the declaration of element 'beans'Failed to read schema document 'http://www.springframework.org/schema/beans/spring- beans-3.0.xsd'
Multiple annotations found at this line: - cvc-elt.1: Cannot find the declaration of element 'beans' ...
- javascript高级程序设计---document节点
document节点是文档的根节点,每张网页都有自己的document节点,window.document就是指向这个节点.只要浏览器开始载入文档,这个节点就开始了 对于HTML文档来说,docume ...
- (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点
Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...
- (87)Wangdao.com第二十天_JavaScript document 节点对象
document 节点对象, 代表整个文档,每张网页都有自己的 document 对象. window.document 当浏览器开始加载文档时就存在了 正常的网页使用 document 或者 win ...
- scrollIntoView()的用法
scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类 ...
随机推荐
- SSH框架结构分析
分类: 工作问题2012-03-29 18:10 1511人阅读 评论(0) 收藏 举报 框架sshhibernatespringstrutsdao 最近在弄j2ee,发现还是学到了很多东西,心情ha ...
- vb.net FTP上传下载,目录操作
https://blog.csdn.net/dzweather/article/details/51429107 FtpWebRequest与FtpWebResponse类用来与特定FTP服务器进行沟 ...
- Vue.js面试题
一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...
- Eclipse设置自动提示代码(不用alt+/了)
在preferences找到如图的相关位置.在输入框里把26个字母加进去,qwer...........
- 【LeetCode】113. 路径总和 II
题目 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 sum = 22, 5 / \ ...
- Kubernetes 各版本镜像列表
以下镜像列表由 kubeadm v1.11.1 导出,若使用预下载镜像离线部署的方式部署,请使用 kubeadm v1.11.1 版本 导出各版本镜像列表: kubeadm config images ...
- HiBench成长笔记——(8) 分析源码workload_functions.sh
workload_functions.sh 是测试程序的入口,粘连了监控程序 monitor.py 和 主运行程序: #!/bin/bash # Licensed to the Apache Soft ...
- visio 2019 激活方法
今日因工作需要使用visio,无奈下载2019版本需要激活,很多功能无法使用,最近在网上发现一个非常简单就是一个本地可执行脚本,本人已亲测完全激活成功,随分享给大家 复制下面代码: @echo off ...
- Ubuntu下安装 Mysql
MYSQL在ubuntu16.04下的编译安装mysql-5.6.23.tar.gz 为减少安装过程中因权限带来个各种问题,建议全程用root用户编译安装,步骤如下: 1.安装依赖文件 apt-ge ...
- 将证书添加到受信任的根证书存储失败,出现以下错误:访问控制列表(ACL)结构无效
问题出现情景: 使用 vs2017 创建一个 ASP.NET Core Web 应用程序 -> Ctrl + F5 运行项目 选择是,但是添加证书失败,是什么原因导致的我不知道,有大佬的知道的话 ...