关于 scrollIntoView() 锚点 元素滚动到指定位置 平滑
很简单好用的方法，直接上代码：
document.getElementById(50).scrollIntoView({behavior: 'smooth', //顺滑的滚动block: 'center', //容器上下的中间inline: 'start', //容器左右的左边
})上述代码的运行结果：
scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域,但是前提是它的 容器可滚动
浏览器支持如下：
| 特征 | 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] |
不支持的话，behavior 的 smooth 和 block、inline 的 center 好像会失效
简单的使用方法( alignToTop )：
也是得到了良好支持的方法，各大浏览器基本都能用：
document.getElementById(50).scrollIntoView() //等同于true，容器的最上方，容器左右的最近点document.getElementById(50).scrollIntoView(true) //等同于参数{block: "start", inline: "nearest"}，容器的最上方，容器左右的最近点document.getElementById(50).scrollIntoView(false) //等同于参数{block: "end", inline: "nearest"}，容器的最下方，容器左右的最近点参数用法见下 参数讲解用到 scrollIntoViewOptions：
| scrollIntoViewOptions | 可选 |
|---|---|
| behavior 过渡动画 | "auto"，"instant"(直接过去)或"smooth"（顺滑的过去），默认为"auto"。 |
| block 滚动至容器上下位置 | "start"，"center"，"end"或"nearest"（最近的位置），默认为"center"。 |
| inline 滚动至容器左右位置 | "start"，"center"，"end"或"nearest"（最近的位置）。默认为"nearest"。 |
nearest 就是用最小的距离把元素带到你的视野中，本来在上面就滚动到最上面，在下面就滚动到最下面，本来在视野中就不动，这样子。
关于 scrollIntoView() 锚点 元素滚动到指定位置 平滑相关推荐
- vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
- div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. 查 ...
- js控制页面滚动到指定位置，js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置 最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
- 监听某个区域滚动_监听页面滚动及滚动到指定位置
一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scrollTop就是触发滚轮 ...
- js是滚动条滑到固定位置_js滚动到指定位置
序言:在网络上百度,关键字:"js div滚动到指定位置",结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单 ...
- android 输入法键盘弹出与否判断和输入法键盘弹出时将界面滚动到指定位置
本文章重点谈下如何实现,结合以下demo,来谈谈输入法键盘弹出与否判断和输入法键盘弹出时将界面滚动到指定位置 1.先看下demo的场景,这是个登录界面,因为界面元素比较多,导致在输入法弹出时,下面的登 ...
- Query实现将div中滚动条滚动到指定位置的方法，html中offsetTop、clientTop、scrollTop、offsetTop各属性的解释
TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...
- 用startSmoothScroll实现RecyclerView滚动到指定位置并置顶，含有动画。
RecyclerView滚动到指定位置并置顶 RecyclerView本身提供了几个定位的方法,除了手动滑动的scrollTo,smootScrollTo和scrollBy,smoothScrollB ...
- ios开发之--令UITableView滚动到指定位置
这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow:10 inSe ...
最新文章
- 求助！妹子一个rm -rf把公司服务器数据删没了，我该怎么办？
- nefu 1029 字符串
- Node.js 笔记01
- java EL表达式中${param.name}详细
- python 最快 因式分解_Python实现的对一个数进行因式分解操作示例
- 7805输入电流有要求吗_【电磁炉技术】电磁炉常用元器件的使用要求和维修事项...
- Laravel测试驱动开发--反向单元测试
- 被尘封的故事鸿蒙轩,被尘封的故事全任务通关人物存档
- SAP License：解释一下目标成本、计划成本和标准成本的区别
- 《『若水新闻』客户端开发教程》——15代码编写(7)
- MS Expression Web中的Asp.net mvc（和其他网络编辑工具）
- DataSet/DataFrame性能比RDD高？
- sqlmap能测试java么_ibatis框架如何测试？ibatis入门解析
- layer 子页面提交 刷新父页面 table
- 老司机带你用python爬取妹子图，接稳这波福利
- 2022华为杯 E 题 数学建模思路分享
- hdfs命令_HDFS命令
- 量子加密神话破灭？破解论文出现
- 嵌入式和单片机的区别是什么
- 记第一次挖洞交洞历程