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. Html5使用audio播放音乐

    html代码 <audio  id="myaudio" src="http://ws.stream.qqmusic.qq.com/C100003R74Cn0JR4O ...

  2. Python基础week2

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...

  3. 浅谈JVM线程调度机制及主要策略

    在之前有说过线程,应该都知道,所谓线程就是进程中的一个子任务,一个进程有多个线程.今天的话主要就是谈一谈JVM线程调度机制.我们结合线程来说,当我们在做多线程的案例时,如一个经典案例,火车站卖票. * ...

  4. SpringBoot如何返回页面

    SpringBoot中使用Controller和页面的结合能够很好地实现用户的功能及页面数据的传递.但是在返回页面的时候竟然会出现404或者500的错误,我总结了一下如何实现页面的返回以及这里面所包含 ...

  5. 开源DDD设计模式框架YMNNetCoreFrameWork第一篇

    DDD设计模式:仓储.领域模型.应用层.聚合根.事件总线,以业务模型驱动设计,从数据模型驱动脱离,不用关心数据库设计,开发效率更高 DDD领域驱动设计模型概念不再讲解,直接上技术 框架搭建: 如图所示 ...

  6. 用python实现在手机查看小姐姐的电脑在作什么！

    看上心意的小姐姐,想看她平时都浏览什么网页,如何才能看她的桌面呢,都说Python很厉害,这次我们做一个利用移动端访问电脑来查看电脑的界面的神器!不知道大家以前有没有做过这方面的东西呢?也许大家听起来 ...

  7. SQL中Left Join 与Right Join 与 Inner Join 与 Full Join的区别

    原文:http://blog.csdn.net/shadowyelling/article/details/7684714 Left Join : 返回左表中的全部信息 以及右表中与左表条件相关的信息 ...

  8. Django（六）实战2：向数据库添加，删除数据、重定向写法、重定向简写

    一.向数据库添加图书数据 [上接]https://blog.csdn.net/u010132177/article/details/103831173 1)首先开启mysql服务,并运行项目 启动my ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具

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

  10. NO6 alias-unalias命令,递归创建目录,如何取消覆盖提示

    ·如果需要更新补丁则执行:·yum update·yum install lrzsz telnet tree nmap nc -y·alias #查看系统现有的别名.        一.设置别名eg: ...