AllinToyou

这个屌丝很懒，什么也没留下！

热门标签

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

作者：AllinToyou | 2024-03-23 13:15:42

踩

php设置页面自动滚动

概述

项目中需要把一个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元素querySelectorAll可能让你意外的特性表现

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

&l ...

web进阶之jQuery操作DOM元素&;&;MySQL记录操作&;&;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 &; DMT

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

java15 IO装饰设计模式

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

直播服务器Nginx

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

【翻译】了解ASP.NET MVC中的Ajax助手

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

Spring Cloud 2-Hystrix DashBoard仪表盘(五)

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 动态树(树链剖分+容斥原理)

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/295380