php自动滚动到页尾,让DOM元素自动滚到视野内ScrollIntoView

概述

项目中需要把一个DOM元素自动滚动到视野内，百思不得其解，最后再element库里面发现了这个方法，记录下来供以后开发时参考，相信对其他人也有用。

参考资料：element scroll-into-view.js

代码

代码如下：

/* eslint-disable no-param-reassign */

export default function scrollIntoView(container, selected) {

if (!selected) {

container.scrollTop = 0;

return;

}

const offsetParents = [];

let pointer = selected.offsetParent;

while (pointer && container !== pointer && container.contains(pointer)) {

offsetParents.push(pointer);

pointer = pointer.offsetParent;

}

const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0);

const bottom = top + selected.offsetHeight;

const viewRectTop = container.scrollTop;

const viewRectBottom = viewRectTop + container.clientHeight;

if (top < viewRectTop) {

container.scrollTop = top;

} else if (bottom > viewRectBottom) {

container.scrollTop = bottom - container.clientHeight;

}

}

JS判断指定dom元素是否在屏幕内的方法实例

前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,或者图片的懒加载效果,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原 ...

【百度地图API】——如何让标注自动呈现在最佳视野内

原文:[百度地图API]--如何让标注自动呈现在最佳视野内 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道. -------- ...

笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

dom元素的自上而下自动滚动

dom元素的自上而下自动滚动

DOM元素querySelectorAll可能让你意外的特性表现

一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码:

&l ...

web进阶之jQuery操作DOM元素&amp&semi;&amp&semi;MySQL记录操作&amp&semi;&amp&semi;PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

vue(4)—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

DOM元素的位置、尺寸及更多的信息

一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...

DOM元素属性值如果设置为对象

结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指 ...

随机推荐

VMT &amp&semi; DMT

虚拟方法表和动态方法表 虚拟方法表VMT: 一个虚拟方法表从指针所指地址的负偏移.76 处开始,长度动态分配(由虚拟方法的个数确定).虚拟方法表被分为很多小段,每段占4 个字节,也就是众多指针.每个指 ...

java15 IO装饰设计模式

IO装饰设计模式:(IO中使用了装饰设计模式) 节点流可以直接从源读取数据,处理流就是对节点流的包装,这就是装饰,装饰就是对原有的流的性能的提升.比如买的车,马力不够,就进行装饰,使其马力增大. 装饰 ...

直播服务器Nginx

Mac直播服务器Nginx配置对HLS的支持 在上一篇中Mac上搭建直播服务器Nginx+rtmp,我们已经搭建了nginx+rtmp直播服务器.下面需要对Nginx服务器增加对HLS的支持.在Ngi ...

【翻译】了解ASP&period;NET MVC中的Ajax助手

原文:Understanding AJAX Helpers in ASP.NET MVC 作者: Shailendra Chauhan works as Software Analyst at rep ...

Spring Cloud 2-Hystrix DashBoard仪表盘&lpar;五&rpar;

Spring Cloud  Hystrix DashBoard  1.监控系统配置 pom.xml application.yml Application.java 2.被监控服务配置 pom.xml ...

Python模块 3

time模块 在计算中时间共有三种方式: 1.时间戳: 通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type(time.time())”,返回的是flo ...

linux中管理包的apt和dpkg命令用法

1,apt-get命令 apt-get是debian,ubuntu发行版的包管理工具,与红帽中的yum工具非常类似,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸 ...

JSP基础知识➣结构及生命周期(一)

概述 网络服务器需要一个JSP引擎,也就是一个容器来处理JSP页面.容器负责截获对JSP页面的请求.本教程使用内嵌JSP容器的Apache来支持JSP开发. JSP容器与Web服务器协同合作,为JSP ...

matplotlib多plot可视化

代码: # -*- coding: utf-8 -*- """ Created on Thu Jul 12 16:37:47 2018 @author: zhen &qu ...

BZOJ3589 动态树(树链剖分&plus;容斥原理)

显然容斥后转化为求树链的交.这个题非常良心的保证了查询的路径都是到祖先的,求交就很休闲了. #include #include #inclu ...