Element​.scroll​Into​View()

让当前的元素滚动到浏览器窗口的可视区域内
  1. element.scrollIntoView(); // 等同于element.scrollIntoView(true)
  2. element.scrollIntoView(alignToTop); // Boolean型参数
  3. /* alignToTop： 一个Boolean值：
  4. 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
  5. 相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
  6. 这是这个参数的默认值。
  7.  
  8. 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
  9. 相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
  10. */

Document​.element​From​Point(x, y)

返回当前文档上处于指定坐标位置最顶层的元素，坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的，通常 x 和 y 坐标都应为正数.

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     html,
  11.     body {
  12.       margin: 0;
  13.       padding: 0;
  14.       width: 100%;
  15.       height: 100%;
  16.     }
  17.  
  18.     ul,
  19.     li {
  20.       margin: 0;
  21.       padding: 0;
  22.       list-style-type: none;
  23.     }
  24.  
  25.     .list-content {
  26.       width: 100%;
  27.       position: relative;
  28.       font-size: 14px;
  29.     }
  30.  
  31.     .sublist-alphabet {
  32.       position: fixed;
  33.       width: 14px;
  34.       right: 14px;
  35.       top: 28px;
  36.     }
  37.  
  38.     .sublist-alphabet li {
  39.       width: 14px;
  40.       height: 14px;
  41.       line-height: 14px;
  42.       text-align: center;
  43.       border-radius: 50%;
  44.       margin: 5px 0;
  45.     }
  46.  
  47.     .main-content li {
  48.       width: 100%;
  49.       margin: 10px;
  50.       font-size: 16px;
  51.     }
  52.     .main-content li div {
  53.       width: 100%;
  54.       height: 20px;
  55.       line-height: 20px;
  56.     }
  57.     .main-content li div ~ div {
  58.       border-top: 1px solid red;
  59.     }
  60.  
  61.     .sublist-alphabet .active {
  62.       color: rgb(235, 17, 119);
  63.       background-color: #ccc;
  64.     }
  65.  
  66.     .main-content .active {
  67.       background-color: aqua;
  68.     }
  69.   </style>
  70. </head>
  71.  
  72. <body>
  73.   <div class="list-content">
  74.     <!-- 字母表 -->
  75.     <ul class="sublist-alphabet">
  76.       <li>a</li>
  77.       <li>b</li>
  78.       <li>c</li>
  79.       <li>d</li>
  80.       <li>e</li>
  81.       <li>f</li>
  82.       <li>g</li>
  83.     </ul>
  84.     <!-- 内容列表 -->
  85.     <ul class="main-content">
  86.       <li>
  87.         <div>aaaaaaaaaaaaaaaaa1</div>
  88.         <div>aaaaaaaaaaaaaaaaa2</div>
  89.         <div>aaaaaaaaaaaaaaaaa3</div>
  90.         <div>aaaaaaaaaaaaaaaaa1</div>
  91.         <div>aaaaaaaaaaaaaaaaa2</div>
  92.         <div>aaaaaaaaaaaaaaaaa3</div>
  93.         <div>aaaaaaaaaaaaaaaaa1</div>
  94.         <div>aaaaaaaaaaaaaaaaa2</div>
  95.         <div>aaaaaaaaaaaaaaaaa3</div>
  96.         <div>aaaaaaaaaaaaaaaaa1</div>
  97.         <div>aaaaaaaaaaaaaaaaa2</div>
  98.         <div>aaaaaaaaaaaaaaaaa3</div>
  99.         <div>aaaaaaaaaaaaaaaaa1</div>
  100.         <div>aaaaaaaaaaaaaaaaa2</div>
  101.         <div>aaaaaaaaaaaaaaaaa3</div>
  102.         <div>aaaaaaaaaaaaaaaaa1</div>
  103.         <div>aaaaaaaaaaaaaaaaa2</div>
  104.         <div>aaaaaaaaaaaaaaaaa3</div>
  105.         <div>aaaaaaaaaaaaaaaaa1</div>
  106.         <div>aaaaaaaaaaaaaaaaa2</div>
  107.         <div>aaaaaaaaaaaaaaaaa3</div>
  108.         <div>aaaaaaaaaaaaaaaaa1</div>
  109.         <div>aaaaaaaaaaaaaaaaa2</div>
  110.         <div>aaaaaaaaaaaaaaaaa3</div>
  111.         <div>aaaaaaaaaaaaaaaaa1</div>
  112.         <div>aaaaaaaaaaaaaaaaa2</div>
  113.         <div>aaaaaaaaaaaaaaaaa3</div>
  114.       </li>
  115.       <li data-type="b">
  116.         <div>bbbbbbbbbbbbbbbbb1</div>
  117.         <div>bbbbbbbbbbbbbbbbb2</div>
  118.         <div>bbbbbbbbbbbbbbbbb3</div>
  119.         <div>bbbbbbbbbbbbbbbbb1</div>
  120.         <div>bbbbbbbbbbbbbbbbb2</div>
  121.         <div>bbbbbbbbbbbbbbbbb3</div>
  122.         <div>bbbbbbbbbbbbbbbbb1</div>
  123.         <div>bbbbbbbbbbbbbbbbb2</div>
  124.         <div>bbbbbbbbbbbbbbbbb3</div>
  125.         <div>bbbbbbbbbbbbbbbbb1</div>
  126.         <div>bbbbbbbbbbbbbbbbb2</div>
  127.         <div>bbbbbbbbbbbbbbbbb3</div>
  128.         <div>bbbbbbbbbbbbbbbbb1</div>
  129.         <div>bbbbbbbbbbbbbbbbb2</div>
  130.         <div>bbbbbbbbbbbbbbbbb3</div>
  131.         <div>bbbbbbbbbbbbbbbbb1</div>
  132.         <div>bbbbbbbbbbbbbbbbb2</div>
  133.         <div>bbbbbbbbbbbbbbbbb3</div>
  134.       </li>
  135.       <li data-type="c">
  136.         <div>ccccccccccccccccc1</div>
  137.         <div>ccccccccccccccccc2</div>
  138.         <div>ccccccccccccccccc3</div>
  139.         <div>ccccccccccccccccc1</div>
  140.         <div>ccccccccccccccccc2</div>
  141.         <div>ccccccccccccccccc3</div>
  142.         <div>ccccccccccccccccc1</div>
  143.         <div>ccccccccccccccccc2</div>
  144.         <div>ccccccccccccccccc3</div>
  145.         <div>ccccccccccccccccc1</div>
  146.         <div>ccccccccccccccccc2</div>
  147.         <div>ccccccccccccccccc3</div>
  148.         <div>ccccccccccccccccc1</div>
  149.         <div>ccccccccccccccccc2</div>
  150.         <div>ccccccccccccccccc3</div>
  151.         <div>ccccccccccccccccc1</div>
  152.         <div>ccccccccccccccccc2</div>
  153.         <div>ccccccccccccccccc3</div>
  154.       </li>
  155.       <li data-type="d">
  156.         <div>ddddddddddddddddd1</div>
  157.         <div>ddddddddddddddddd2</div>
  158.         <div>ddddddddddddddddd3</div>
  159.         <div>ddddddddddddddddd1</div>
  160.         <div>ddddddddddddddddd2</div>
  161.         <div>ddddddddddddddddd3</div>
  162.         <div>ddddddddddddddddd1</div>
  163.         <div>ddddddddddddddddd2</div>
  164.         <div>ddddddddddddddddd3</div>
  165.         <div>ddddddddddddddddd1</div>
  166.         <div>ddddddddddddddddd2</div>
  167.         <div>ddddddddddddddddd3</div>
  168.         <div>ddddddddddddddddd1</div>
  169.         <div>ddddddddddddddddd2</div>
  170.         <div>ddddddddddddddddd3</div>
  171.         <div>ddddddddddddddddd1</div>
  172.         <div>ddddddddddddddddd2</div>
  173.         <div>ddddddddddddddddd3</div>
  174.       </li>
  175.       <li data-type="e">
  176.         <div>eeeeeeeeeeeeeeeee1</div>
  177.         <div>eeeeeeeeeeeeeeeee2</div>
  178.         <div>eeeeeeeeeeeeeeeee3</div>
  179.         <div>eeeeeeeeeeeeeeeee1</div>
  180.         <div>eeeeeeeeeeeeeeeee2</div>
  181.         <div>eeeeeeeeeeeeeeeee3</div>
  182.         <div>eeeeeeeeeeeeeeeee3</div>
  183.         <div>eeeeeeeeeeeeeeeee3</div>
  184.         <div>eeeeeeeeeeeeeeeee3</div>
  185.         <div>eeeeeeeeeeeeeeeee3</div>
  186.         <div>eeeeeeeeeeeeeeeee3</div>
  187.         <div>eeeeeeeeeeeeeeeee3</div>
  188.         <div>eeeeeeeeeeeeeeeee3</div>
  189.         <div>eeeeeeeeeeeeeeeee3</div>
  190.       </li>
  191.       <li data-type="f">
  192.         <div>fffffffffffffffff1</div>
  193.         <div>fffffffffffffffff2</div>
  194.         <div>fffffffffffffffff3</div>
  195.         <div>fffffffffffffffff3</div>
  196.         <div>fffffffffffffffff3</div>
  197.         <div>fffffffffffffffff3</div>
  198.         <div>fffffffffffffffff3</div>
  199.         <div>fffffffffffffffff3</div>
  200.         <div>fffffffffffffffff3</div>
  201.         <div>fffffffffffffffff3</div>
  202.       </li>
  203.       <li data-type="g">
  204.         <div>ggggggggggggggggg1</div>
  205.         <div>ggggggggggggggggg2</div>
  206.         <div>ggggggggggggggggg2</div>
  207.         <div>ggggggggggggggggg2</div>
  208.         <div>ggggggggggggggggg2</div>
  209.         <div>ggggggggggggggggg2</div>
  210.         <div>ggggggggggggggggg2</div>
  211.         <div>ggggggggggggggggg2</div>
  212.         <div>ggggggggggggggggg2</div>
  213.         <div>ggggggggggggggggg2</div>
  214.         <div>ggggggggggggggggg2</div>
  215.         <div>ggggggggggggggggg2</div>
  216.         <div>ggggggggggggggggg2</div>
  217.         <div>ggggggggggggggggg2</div>
  218.         <div>ggggggggggggggggg2</div>
  219.         <div>ggggggggggggggggg2</div>
  220.         <div>ggggggggggggggggg2</div>
  221.         <div>ggggggggggggggggg2</div>
  222.         <div>ggggggggggggggggg3</div>
  223.       </li>
  224.     </ul>
  225.   </div>
  226.   <script>
  227.     let list = document.querySelectorAll('.sublist-alphabet li')
  228.     let contentList = document.querySelectorAll('.main-content li')
  229.     list.forEach((item, index) => {
  230.       list[index].onclick = () => {
  231.         const lastIndex = sessionStorage.getItem('lastIndex') || ''
  232.         if(lastIndex) {
  233.           contentList[lastIndex].classList.remove('active')
  234.           list[lastIndex].classList.remove('active')
  235.         }
  236.         contentList[index].scrollIntoView(true)
  237.         contentList[index].classList.add('active')
  238.         list[index].classList.add('active')
  239.         sessionStorage.setItem('lastIndex', index)
  240.       }
  241.     })
  242.   </script>
  243. </body>
  244.  
  245. </html>

Element.scrollIntoView() 和 document.elementFromPoint ()的更多相关文章

  1. Element.scrollIntoView()

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); element.scrollIntoView( ...

  2. js的Element.scrollIntoView的学习

    1.Element.scrollIntoView()    该方法让当前元素滚动到浏览器窗口的可是区域内: 2.语法: element.scrollIntoView();//等同于element.sc ...

  3. document.elementFromPoint在IE8下无法稳定获取当前坐标元素的解决方法

    document.elementFromPoint(e.clientX, e.clientY) document.elementFromPoint(e.clientX, e.clientY) 执行2次 ...

  4. 元素在当前窗口可视的区域---Element.scrollIntoView()

    element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // ...

  5. 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' ...

  6. javascript高级程序设计---document节点

    document节点是文档的根节点,每张网页都有自己的document节点,window.document就是指向这个节点.只要浏览器开始载入文档,这个节点就开始了 对于HTML文档来说,docume ...

  7. (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点

    Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...

  8. (87)Wangdao.com第二十天_JavaScript document 节点对象

    document 节点对象, 代表整个文档,每张网页都有自己的 document 对象. window.document 当浏览器开始加载文档时就存在了 正常的网页使用 document 或者 win ...

  9. scrollIntoView()的用法

    scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类 ...

随机推荐

  1. JAVA实现单例模式的四种方法和一些特点

    JAVA实现单例模式的四种方法和一些特点,需要的朋友可以参考一下     一.饿汉式单例类 复制代码 代码如下: public class Singleton  {      private Sing ...

  2. CodeForces - 876B Divisiblity of Differences

    题意:给定n个数,从中选取k个数,使得任意两个数之差能被m整除,若能选出k个数,则输出,否则输出“No”. 分析: 1.若k个数之差都能被m整除,那么他们两两之间相差的是m的倍数,即他们对m取余的余数 ...

  3. XV6源代码阅读-文件系统

    Exercise1 源代码阅读 文件系统部分 buf.h fcntl.h stat.h fs.h file.h ide.c bio.c log.c fs.c file.c sysfile.c exec ...

  4. LCA之tarjan离线

    显然81篇题解是有点多了,不让我提交. 更为不好的是没有一篇详细的\(tarjan\)(不过我也不会写详细的). 不过\(tarjan\)并没有我们想象的那样难理解,时间也并不爆炸(巧妙的跳过难写二字 ...

  5. SpringAOP源码跟踪及学习

    Spring 版本 4.3.2 在拿到 Bean 实例以后,会经历一系列的初始化工作,如:工厂回调.init 方法.后处理器在 Bean 初始化前后的处理等,在一般情况下(非 factory-meth ...

  6. Java集合基于JDK1.8的LinkedList源码分析

    上篇我们分析了ArrayList的底层实现,知道了ArrayList底层是基于数组实现的,因此具有查找修改快而插入删除慢的特点.本篇介绍的LinkedList是List接口的另一种实现,它的底层是基于 ...

  7. JS: 图片轮播模板——左右移动，点击编码移动，自动轮播

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> ...

  8. IQueryable 转DataTable

    public static DataTable CopyToDataTable<T>(IEnumerable<T> array) { var ret = new DataTab ...

  9. 如何修改 Vmware vRealize Operations Manager Appliance root密码

    开机后,按上下键,选择 中间那一项,在底部增加:init=/bin/bash 进入单用户模式后,输入命令:# passwd root                      #修改root密码,要输 ...

  10. mapper语句的一些问题，union连表查询和mapper中根据条件不同采用不同语句的查询问题

    根据业务要求,不同表查出来的内容天需要一起展示出来,并且还有分页之类的,不同表查询字段也不完全相同,这样就有一个问题,不同表如何接合在一起,不同字段怎么办? 这个问题就需要用到union联合查询,并将 ...