当前位置:网站首页>详细介绍scrollIntoView()方法属性
详细介绍scrollIntoView()方法属性
2022-07-02 14:42:00 【全栈程序员站长】
大家好,又见面了,我是你们的朋友全栈君。
因为工作中用到了锚点设置,常用的总是出问题,后来扒拉出了这个属性,详细研究了下方便日后使用
介绍scrollIntoView()的详细属性
简介
该scrollIntoView()
方法将调用它的元素滚动到浏览器窗口的可见区域。
PS:根据其他元素的布局,元素可能无法完全滚动到顶部或底部。
TIPS:页面(容器)可滚动时才有用!
语法
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数
element.scrollIntoView(scrollIntoViewOptions); //对象参数
语法参数
alignToTop | [可选],目前之前这个参数得到了良好的支持 |
---|---|
true | 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是默认值 |
false | 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。 |
scrollIntoViewOptions | [可选],目前这个参数浏览器对它的支持并不好,可以查看下文兼容性详情 |
---|---|
behavior | [可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。 |
block | [可选] "start","center","end"或"nearest"。默认为"center"。 |
inline | [可选] "start","center","end"或"nearest"。默认为"nearest"。 |
示例
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
应用场景
URL中hash标记的进化
- 聊天窗口滚动显示最新的消息
- 往一个列表添加item后滚动显示最新的添加的item
- 回到顶部(#)
- 滚动到指定位置(#xxx)
浏览器兼容性
特征 | Chrome | Firefox | Safari | Edge | IE | Opera |
---|---|---|---|---|---|---|
基本支持( alignToTop ) | yes | yes | yes | yes | yes | yes |
scrollIntoViewOptions | yes | yes | 5.1[1] | 12[1] | 9[1] | 48[2] |
注意:不支持"smooth"
行为或"center"
选项。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148024.html原文链接:https://javaforall.cn
边栏推荐
- The macrogenome microbiome knowledge you want is all here (2022.7)
- 一文看懂:数据指标体系的4大类型
- 相信自己,这次一把搞定JVM面试
- [cloud native] briefly talk about the understanding of flume, a massive data collection component
- 宝宝巴士创业板IPO被终止:曾拟募资18亿 唐光宇控制47%股权
- Digital IC hand tearing code -- voting device
- Just a coincidence? The mysterious technology of apple ios16 is even consistent with the products of Chinese enterprises five years ago!
- 上传代码到远程仓库报错error: remote origin already exists.
- Connect Porsche and 3PL EDI cases
- The computer comes with software to make the background color of the picture transparent (matting white background)
猜你喜欢
Tech Talk 活动预告 | 基于Amazon KVS打造智能视觉产品
Sword finger offer 25 Merge two sorted linked lists
酒仙网IPO被终止:曾拟募资10亿 红杉与东方富海是股东
[essay solicitation activity] Dear developer, RT thread community calls you to contribute
剑指 Offer 26. 树的子结构
Exploration of mobile application performance tools
智能垃圾桶(五)——点亮OLED
How openharmony starts FA of remote devices
Weili holdings listed on the Hong Kong Stock Exchange: with a market value of HK $500million, it contributed an IPO to Hubei
linux安装postgresql + patroni 集群问题
随机推荐
【Leetcode】13. 罗马数字转整数
QStyle实现自绘界面项目实战(二)
一年顶十年
traceroute命令讲解
VMware安装win10镜像
P6774 [noi2020] tears in the era (block)
Sword finger offer 24 Reverse linked list
Shutter: action feedback
What is the difference between JSP and servlet?
linux下配置Mysql授权某个用户远程访问,不受ip限制
In MySQL and Oracle, the boundary and range of between and precautions when querying the date
2、 Expansion of mock platform
How openharmony starts FA of remote devices
亚马逊云科技 Community Builder 申请窗口开启
易语言abcd排序
lsf基础命令
[cloud native] briefly talk about the understanding of flume, a massive data collection component
Does digicert SSL certificate support Chinese domain name application?
Exploration of mobile application performance tools
vscode设置删除行快捷键[通俗易懂]