HTML5 之 Element.scrollIntoView() 和 document.elementFromPoint ()

最新推荐文章于 2023-04-01 15:18:29 发布
最新推荐文章于 2023-04-01 15:18:29 发布
阅读量524 收藏
点赞数
原文链接：http://www.cnblogs.com/houfee/p/10734048.html
版权

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>
View Code

 

转载于:https://www.cnblogs.com/houfee/p/10734048.html

weixin_30379911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域
weixin_45634433的博客
07-14 413
MDN地址 问题描述: 页面的最底部有分页器,但是每次点击切换页码,要让页面恢复到最顶端 语法 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数 参数有两种写法 alignToTop : 布尔值类型 +true
Element.scrollIntoView()
Cvory
11-19 248
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoV...
document.elementFromPoint
weixin_33754913的博客
08-15 1130
先说一下这个方法的参数 elemntFromPoint(x,y);//传入坐标值，返回当前页面上包含该坐标点的顶层元素 注意2点，坐标值和顶层元素 先说坐标，因为不同的人理解是不一样的，也就造就了这个方法在不同的浏览器中表现是不一样的，所以在传入坐标时就分 整体页面坐标 和 可视区域坐标，我们看上篇文章中的图来理解下：中间的方块是可视区域...
scroll-into-view:如果可能，将元素滚动到视图中
05-04
什么 滚动到视图中 同时滚动所有滚动父级，以便可以看到该元素。 捐献 如果您想在财务上显示您的支持， 例子 如何 要求它 var scrollIntoView = require ( 'scroll-into-view' ) ; 用它 scrollIntoView ( someElement ) ; 您可以传递设置来控制时间，缓动以及父项是否是可滚动的有效元素以及对齐方式： 所有选项都是可选的。 scrollIntoView ( someElement , { time : 500 , // half a second ease : function ( value ) { return Math . pow ( value , 2 ) - value ; // Do something weird. } , validTarget
如果需要，请滚动到视图：Element.scrollIntoView填充“需要”和“平滑”之类的内容
02-06
此后，CSS工作组决定在Element.scrollIntoView实现其功能，方法是使用scrollMode: "if-needed"选项。 因此，对该库进行了重写，以实现该规范，而不是即将弃用的规范。 安装 yarn add scroll-into-view-if-needed ...
jquery.scrollIntoView:滚动元素进入视图时触发回调
06-26
5. **优化性能**：为了提高性能和用户体验，你可能需要使用`requestAnimationFrame`或者`Intersection Observer API`来避免频繁的滚动检测，这些方法只在浏览器渲染新帧时执行回调，减少了不必要的计算。 在压缩包...
react-native-scroll-into-view:将 ReactNative 视图滚动到可见屏幕中。 类似于 DOMElement.scrollIntoView() 浏览器函数
08-05
类似于用于 Web 的DOMElement.scrollIntoView() ，但有一些额外功能。 yarn add react-native-scroll-into-view// ornpm install react-native-scroll-into-view --save没有本机代码：这个库与 Expo 管理的工作流程...
jQuery.scrollIntoView:当DIV滚动到浏览器的可见部分中或滚动出时，它会执行一个功能
05-05
jQuery.scrollIntoView 当将DIV滚动到浏览器的可见部分中或滚动出时，它会执行一个功能。 安装 bower install jquery-scrollIntoView npm install jquery-scrollintoview 用法 $ .scrollIntoView（安装，卸载一次）...
前端项目-jquery-scrollintoview.zip
09-03
在“前端项目-jquery-scrollintoview.zip”这个压缩包中，包含了一个名为“jquery-scrollintoview-master”的文件夹，这是项目的源码。在这个文件夹里，你可以找到插件的源代码、示例、文档等相关资源。通过研究这些...
scroll-into-view, 如果可能，将元素滚动到视图中.zip
09-18
scroll-into-view, 如果可能，将元素滚动到视图中 什么将元素滚动到视图中同时滚动任何滚动父对象，使该元素处于视图中。捐赠如果你想在财务上显示你的支持，我是在 Patreon示例示例需要它var scrollIntoView = require('scroll-
DOM中document文档对象常用方法
06-03
DOM中document文档对象常用方法.为网页版。打开后，右击查看元素或源码，ok建议使用火狐，谷歌浏览器，ie
elementFromPoint
Marshall001的博客
12-26 1331
在瀏覽器里，爲了獲取元素我們常常用下面幾個方法：document.getElementById(id) document.getElementsByName(name) document.getElementsByTagName(tagName) document.querySelector()有時，爲了獲取鼠標處的元素，我們得知道另一個方法：document.elementFromPoint(x,
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
anhumi4350的博客
08-25 726
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoVie...
详解Element.scrollIntoView()
青颜的天空的博客
08-03 3322
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 语法 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数 参数 alignToTop 可选 一个Boolean值
HTML跳转到页面指定位置方法[scrollTo() , scrollIntoView() I40.scrollIntoView()]
Mo___yu的博客
04-01 1266
【代码】HTML跳转到页面指定位置方法[scrollTo() , scrollIntoView() I40.scrollIntoView()]
elementFromPoint的用法（详解）
热门推荐
js_admin的博客
07-24 1万+
document.ElementFromPoint:根据坐标获得元素，可用于触屏设备上获取当前点击元素的名称 语法： oElement = document . elementFromPoint ( iX , iY ) 参数： iX :　 必选项。整数(Integer)。单位：象素(Pixel)。定位横坐标偏移量。 iY :　 必选项。整数(Integer)。单位：象素(Pixel)。定
小程序 scroll-view 之 scroll-into-view 使用技巧
Zhooson的博客
02-26 1万+
小程序 scroll-view 之 scroll-into-view 使用技巧
【小程序】scroll-into-view 踩坑点
qq_35808136的博客
04-11 1804
需求：用户进入会话界面后，屏幕刷新到最新一条消息处 wxml文件： <scroll-view scroll-y="true" scroll-into-view='{{toView}}' style='height: {{scrollHeight_}};'> <view wx:for ="{{session}}"> <view id...
element.scrollIntoView
最新发布
10-15
element.scrollIntoView 是一个 DOM API，用于将指定元素滚动到可视区域内。它的语法如下： ```javascript element.scrollIntoView([options]); ``` 其中，`element` 表示要滚动的元素，`options` 是一个可选的配置对象，可以指定滚动的行为。 例如，要将一个元素滚动到可视区域内，可以这样调用： ```javascript const element = document.getElementById('my-element'); element.scrollIntoView(); ``` 这会将 `my-element` 元素滚动到可视区域内。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值