Element​.scroll​Into​View()

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

如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
*/

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

返回当前文档上处于指定坐标位置最顶层的元素，坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的，通常 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 ()的更多相关文章

  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. 4K对齐

    4K对齐这个概念常常与固态硬盘联系起来.买了一块固态硬盘,装机过程中时有忽略4K对齐这个小细节,但是这个小细节往往十分重要,它影响硬盘的使用寿命和速度. 现在来了解一下4K对齐到底是个什么东西. 一. ...

  2. MyBatis-Insert、Delete、Update的注意事项

    MyBatis-Insert.Delete.Update的注意事项 插入/更新乱码的解决 出现插入乱码,首先要考虑数据库的编码集是不是UTF-8 如果数据库的编码无误,查看MyBatis的全局配置文件 ...

  3. 第三单元总结：JML规格定义下的程序设计、验证与测试

    JML语言及工具 JML语言理论 JML语言利用前置条件.后置条件.不变式等约束语法,描述了Java程序的数据.方法.类的规格,是一种契约式程序设计的实现工具. 常用的JML语言特性 \result: ...

  4. wx地址和腾讯地图

    如果只是要获取当前用户的经纬度和打开微信自带的地图 只需要 jsApiList: ["getLocation","openLocation"] // 先获得 w ...

  5. Day7 - C - Saddle Point ZOJ - 3955

    Chiaki has an n × m matrix A. Rows are numbered from 1 to n from top to bottom and columns are numbe ...

  6. Verilog 2001 `default_nettype none

    在Verilog 1995規定,對於沒宣告的信號會自動視為wire,這樣常常造成debug的困難,Verilog 2001另外定義了`default_nettype none,將不再自動產生wire. ...

  7. SPI协议解析

    1. SPI物理层 SPI通讯需要使用4条线:3条总线和1条片选 . SPI遵循主从模式,3条总线分别是SCK.MOSI和MISO,片选线为nSS(低电平有效),SPI协议适用于一主多从的工作场景: ...

  8. NO10 查看Linux操作系统-版本-内核-Linux分区

    ·看Linux系统: [root@localhost ~]# uname -m  (看操作系统)x86_64[root@localhost ~]# uname -a   (看操作系统)Linux lo ...

  9. Day 25：XML解析

    XML解析 xml文件除了给开发者看,更多的情况使用程序读取xml文件的内容.这叫做xml解析 XML解析方式(原理不同) DOM解析 SAX解析 XML解析工具 DOM解析原理: JAXP (ora ...

  10. Vue - slot-scope="scope" 的意义

      <template slot-scope="scope">                     <el-button type="primary ...