使用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.滚动到指 ...
随机推荐
- js数组的创建、添加、删除、获取指定元素下标
数组: 1.数组内可以存放任意类型的数据 2.数组元素不赋值,则为undefined 3.打印数组时,如果某个元素没有赋值,则为"" 4.访问数组范围以外的元素时,不会出现越界异常 ...
- TCP连接connect函数返回错误
如果是 TCP 套接字,那么调用 connect 函数将激发 TCP 的三次握手过程,而且仅在连接建立成功或出错时才返回.其中出错返回可能有以下几种情况: 三次握手无法建立,客户端发出的 SYN 包没 ...
- SpringCloud-Hoxton.SR1-config整合
1.前一篇讲到了整合eureka和gateway,实现了服务的发现与注册以及网关的统一入口,这一篇在此基础上整合分布式配置中心config,首先新建一个子项目config-services作为服务端, ...
- uniapp APP端 跳转微信小程序 完成微信支付功能,并回跳回来
先保存 参考链接 完成功能在做具体记录 https://blog.csdn.net/qq_40146789/article/details/121262700?spm=1001.2101.3 ...
- Color the ball HDU - 1556 _差分
N名同学拍成一排,编号为1,2,3,4 -- N.现在有一位老师需要检查所有同学的出勤情况,他会进行点名,每次给出两个数a,b,并且保证a小于等于b,这个区间内的所有同学都会被点名一次,老师会进行N次 ...
- Linux环境使用Docker安装MySql
系统环境: CentOS 7.6 64位(同样适用于Ubuntu) 安装步骤: 1.创建文件夹 /home/docker/mysql/config /home/docker/mysql/data 2. ...
- ASP.NET Core3.1 中使用MongoDB基本操作
1.安装驱动包 install-package MongoDB.Driver -version 2.11.7 2.配置文件帮助类 ConfigHelper public static class Co ...
- 自定义go语言日志输出
自定义输出符合下列需求: 1.含两类日志输出方式:调试模式下输出到控制台:生产环境输出到日志文件 2.调用不同的函数/方法构造不同的输出方式,后续只需调用日志级别对应的函数即可输出该级别日志 工具构造 ...
- VS(Visual Studio)如何修改注释的快捷键(换成Ctrl+/)
原文:https://blog.csdn.net/qq_51485453/article/details/123214455 1.点击"工具">"选项" ...
- 关于Docker容器内不能ping通外网
先在主机重启docker服务 systemctl stop docker systemctl start docker 然后再开启容器,进入容器 https://blog.csdn.net/qq_42 ...