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. vmware fusion 进入 BIOS

    要进入bios有三种方法:1.>启动的时候按F2即可进入bios进行一些启动盘等选项的操作.但是,启动的时候很难第一时间按F2成功进入bios, 2.>修改vmware 进入bios之前的 ...

  2. postgres 删除外部表

    drop external table if exists tableName;

  3. IDEA自用插件，驼峰插件，MyBatis插件，Lombok插件

    IDEA自用插件 驼峰插件:CamelCase,Shift + Alt + u快速切换驼峰 MyBatisX插件:快速在mapper之间跳转 Lombok插件:注解实现get.set方法 MyBati ...

  4. 【转置】使用mysql转置表格行和列

    1.原始表 2.查询结果表 3.查询语句 1 SELECT 2 year1, 3 SUM( CASE WHEN mon= 1 THEN account END ) AS m1, 4 SUM( CASE ...

  5. ROS常用库（三）API学习之常用common_msgs（上）

    一.概述 common_msgs包含其他ROS软件包广泛使用的消息.这些消息包括动作消息(actionlib_msgs),诊断消息(diagnostic_msgs),几何图元(geometry_msg ...

  6. H5易企秀

    周末被领导叫回来加班,说要做一个易企秀一样的页面,然后就有这篇笔记 原计划用几百个计时器去执行,后面放弃了,太难改了,还是选择了animate.css插件,这是一个纯css的插件,只需要引入css就行 ...

  7. Day4 - I - Trucking HDU - 2962

    A certain local trucking company would like to transport some goods on a cargo truck from one place ...

  8. ubuntu18.04.2 Hadoop伪集群搭建

    准备工作: 若没有下载vim请下载vim 若出现 Could not get lock /var/lib/dpkg/lock 问题请参考: https://jingyan.baidu.com/arti ...

  9. 02 DML(DataManipulationLanguage)

    1.插入记录     基本语法 :         INSERT INTO tbl_name (col_name ,col_name1,..,col_nameN) VALUES (val1,val2, ...

  10. Day 23：JAVA SE复习

    作业 1.多线程下载图片 import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream ...