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. 通过SparkListener监控spark应用

    监控spark应用的方式比较多,比如spark on yarn可以通过yarnClient api监控.这里介绍的是spark内置的一种监控方式 如果是sparkStreaming,对应的则是stre ...

  2. PostGIS 常用函数中文介绍说明

    1.OGC标准函数 管理函数: 添加几何字段 AddGeometryColumn(, , , , , ) 删除几何字段 DropGeometryColumn(, , ) 检查数据库几何字段并在geom ...

  3. 61 C项目------家庭收支软件

    1,目标: ①模拟实现一个基于文本界面的<家庭收支软件> ②涉及知识点 局部变量和基本数据类型 循环语句 分支语句 简单的屏幕输出格式控制 2,需求说明: ①模拟实现基于文本界面的< ...

  4. 第一单元总结：基于基础语言、继承和接口的简单OOP

    前情提要 到目前为止,OO课程已经完成了前三次的作业,分别为: 第一次作业:简单多项式的构造和求导.[正则表达式][数据结构][排序] 第二次作业:含三角函数因子的复杂多项式的构造.求导和化简.[递归 ...

  5. vue题型

    一  v-show和v-if区别 个人理解 相同:v-show和v-if都能控制元素的显示和隐藏.两个都是开关. 区别: 1.v-if 是懒加载,是有条件的渲染,它会确保在切换过程中添加或者删除元素. ...

  6. maven详解之 pom.xml 解释

    <project>:pom.xml的根标签,一个maven项目用一对<peoject></project>标签包裹. <modelVersion>4.0 ...

  7. 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

    一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...

  8. 读取多张MNIST图片与利用BaseEstimator基类创建分类器

    读取多张MNIST图片 在读取多张MNIST图片之前,我们先来看下读取单张图片如何实现 每张数字图片大小都为28 * 28的,需要将数据reshape成28 * 28的,采用最近邻插值,如下 def ...

  9. redis改配置

    命令行: 暂时生效,适合于做测试,或者线上马上服务修改,重启失效 CONFIG set stop-writes-on-bgsave-error no OK CONFIG get stop-writes ...

  10. python --- 日志模块 logging

    1.日志的使用 import logging class CommonLog(object): def _common_log(self,level,message): # 设定收集器,再设定收集的级 ...