使用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.滚动到指 ...
随机推荐
- Scrapy模块和Asyncpy模块
Scrapy笔记 scrapy的环境安装 mac or linux: pip install scrapy windows: pip install wheel scrapy框架异步请求基于Twist ...
- Gin加载history模式下打包后的Vue文件,刷新找不到页面404
import ( "io/ioutil" "github.com/gin-contrib/static" "github.com/gin-gonic/ ...
- Web Dynpro for ABAP(15):Print
3.20 Print WDA调用浏览器打印界面 1.创建Print按钮,绑定事件PRINT; 2.实现ONACTIONPRINT事件: method ONACTIONPRINT. DATA:l_api ...
- macOS 常用键盘快捷键大全
对于初次接触 macOS 的朋友来说,除了要寻找不同的 APP 软件之外,还有一件事情也直接影响着使用电脑的效率,那就是 - 键盘快捷键! 与 Windows 的差异 我们先来认识一下苹果 Mac 键 ...
- Java向MySQL写入中文乱码问题解决
Java向MySQL写入中文乱码问题解决 以下仅为本人工作.学习过程中所接触到的内容,不足之处欢迎指出. 问题现象: 使用Java代码向MySQL数据库写入数据,中文字符出现乱码. 解决步骤: 1.查 ...
- js-禁止鼠标右键/禁止选中文字
1 <p>使用contextmenu禁止鼠标右键</p> 2 <script> 3 document.addEventListener('contextmenu', ...
- CSS3-transform缩放
缩放:transform:scale(倍数); 实现hover的时候加载播放图标,具体效果如下: 首先需要创建一个大盒子,盒子上面部分用一个div来呈放图片,下面部分直接书写文字.观察发现播放图标是存 ...
- 2.对于script标签的放置位置
使用<script>元素有两种方式 一种是在页面嵌入JavaScript代码 ,一种就是包含外部JavaScript文件 包含在<script>标签内部的JavaScript代 ...
- HCIA-ICT实战基础12-网络设备安全特性
HCIA-ICT实战基础-网络设备安全特性 目录 常见设备安全加固策略 网络设备安全加固部署示例 本机防攻击配置 1 常见设备安全加固策略 1.1 为什么需要网络设备安全 网络安全是一个系统工程, 网 ...
- css 径向渐变实现渐变小圈
效果如下图: 代码如下: .b-list .ceil .line { height: 20px; width: 100%; margin: 0 auto; background: radial-gra ...