使用scrollIntoView 使某元素滚动到指定位置
var el = document.getElementById('A');
el.scrollIntoView('true');
知识:
element.scrollIntoView(); // 使用的前提是可滚动
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数
alignToTop为true时,元素滚动到可滚动区域的顶部,且默认值为true,等同于 element.scrollIntoView({block: "start", inline: "nearest"});
为false时,元素滚动到可滚动区域的底部,等同于 element.scrollIntoView({block: "end", inline: "nearest"})
。
scrollIntoViewOptions:{
behavior: 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto",
block:定义垂直方向的对齐,"start","center","end", 或"nearest"之一。默认为"start",
inline:定义水平方向的对齐,"start","center","end", 或"nearest"之一。默认为"nearest"。
}
还可以使用scrollTop
var el = document.getElementById(‘A’); // 需要出现在顶部的元素
var content = document.getElementById('scrollbox') // 父级容器
let top = el.offsetTop;
content.scrollTop = top;
使用scrollIntoView 使某元素滚动到指定位置的更多相关文章
- 通过scrollTop,使子元素滚动至指定位置
想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...
- h5之scrollIntoView控制页面元素滚动
如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...
- selenium webdriver——JS滚动到指定位置
1.DOM滚动方法 1.scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...
- js滚动到指定位置
序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
- jquery滚动到指定位置
利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...
- 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置
double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...
- ios开发之--令UITableView滚动到指定位置
这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- js 获取滚动位置,滚动到指定位置,平滑滚动
1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...
随机推荐
- typeScript中特殊类型定义
// Js八种内置类型, string, number, boolean, undefined, null, object, bigint symbol // ECMAScript内置对象 Array ...
- 整合log4j
引入依赖 <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId& ...
- 02 Spark架构与运行流程
1. 为什么要引入Yarn和Spark. YARN优势1.YARN的设计减小了JobTracker的资源消耗,并且让监测每一个Job子任务(tasks)状态的程序分布式化了,更安全.更优美. 2.在新 ...
- Java方法之方法的定义和调用
方法的定义 Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,一般情况下,定义一个方法包含以下语法: 方法包含一个方法头和一个方法体.下面是一个方法的所有部分: 1.修饰符:修饰符 ...
- Linux:服务器(CentOS)搭建FTP服务
Vsftpd(very secure FTP deamon)是众多Linux发行版中默认的FTP服务器.本文以CentOS 8(腾讯云)服务器为例,使用vsftpd搭建Linux云服务器的FTP服务器 ...
- 第六章 mysql日志
第六章 mysql日志 一 错误日志 错误日志的默认存放路径是 mysql 存放数据的地方 hostname.err 1. 修改错误日志存放路径 [mysqld] log-error=/data/m ...
- Pytest Fixture(三)
name: name参数表示可以对fixture的名称进行重命名: 注意:通过name重命名后,继续使用以前的名字调用会报错. import pytest @pytest.fixture(name=' ...
- sed编辑器
sed sed是一个非交互式的流文本编辑器,可实现增删改查,广泛适用于shell脚本中 工作原理 sed每次只从文本或标准输入中读取一行数据,将其拷贝到一个编辑缓冲区,然后对其如同命令一般处理,并显示 ...
- 基于Python的简单读卡上位机界面
使用到的模块,pyserial pyqt5 pymysql (我先是实现在命令行下通过串口进行对板子硬件的控制,比如Led ,beep等,在实现检测卡(是否选卡成功),连接卡(验证哪一个扇区),读 ...
- 实验一 密码引擎-1-OpenEuler-OpenSSL编译
1. 下载最新的OpenSSL源码 2. 用自己的8位学号建立一个文件夹,cd 你的学号,用pwd获得绝对路径 3. 参考https://www.cnblogs.com/rocedu/p/508762 ...