首页 > 其他分享 >页面滚动到指定位置——js中scrollIntoView()的用法

页面滚动到指定位置——js中scrollIntoView()的用法

时间:2022-08-30 16:55:09浏览次数:62  
标签:滚动 scrollIntoView element 参数 对齐 js 页面

element.scrollIntoView() 参数默认为true
1.什么是scrollIntoView?
scrollIntoView是一个与页面(容器)滚动相关的API

2.如何调用?
element.scrollIntoView() 参数默认为true
参数为true:调用该函数,页面发送滚动,使element的顶部与视图(容器)顶部对齐

参数为false:使element的底部与视图(容器)底部对齐

3.使用场景
有的元素在页面的不可见区域,这时候需要scrollIntoView()将其拖动到可见区域,代码如下:

document.getElementById('craft-point').scrollIntoView()


如果看到的情况是,定位到的元素的标题和浏览器顶部对齐了,效果不太好:

这时只要把scrollIntoView()改成scrollIntoView(false)就可以解决了。

完成!!!
————————————————
版权声明:本文为CSDN博主「yehaocheng520」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/yehaocheng520/article/details/124924288

标签:滚动,scrollIntoView,element,参数,对齐,js,页面
From: https://www.cnblogs.com/wxchun/p/16639975.html

相关文章

  • js -- setTimeout 实现倒计时不准确的问题
    setTimeout、setInterval属于定时触发器线程属于macrotask,它的回调会受到GUI渲染、事件触发、http请求、等的影响。所以这两个不适合做精准的定时。最好的方法是定时矫正......
  • JSON WEB TOKEN
    1、JSONWEBTOKEN1.1、什么是JWTJSONWebToken(JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。简称JWT,在HTTP通信过程中,进......
  • JS hashCode()
     functionhashcode(str){varhash=0,i,chr,len;if(str.length===0)returnhash;for(i=0,len=str.length;i<len;i++){chr=str.charCo......
  • JS 1到10随机数,2到10随机数
    Math.random()返回一个0~1之间的随机数;Math.floor()向下取整;Math.ceil()向上取整;Math.round()四舍五入;Math.fround()32位浮点数;1~10随机数letnum......
  • webpack5 中使用iframe 复用导航栏时js代码多次编译问题
    作为webpack萌新,在使用webpack时,偶然发现热更新了多次,最开始以为是配置问题,网上找了很久都没有答案,无意看见一个一个帖子说多引用了一遍js文件,于是我我回去找代码看是不是......
  • js之深拷贝与浅拷贝
    一、深拷贝与浅拷贝什么是深拷贝深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象(新旧对象不共享同一块内存),且修改新对象不会影响......
  • 关于vue.js:vue使用sass中deep报错
    转自:https://lequ7.com/guan-yu-vuejsvue-shi-yong-sass-zhong-deep-bao-cuo.html之前装了一个vue3.0的环境,结果搬砖的时候发现vue2.0的项目跑不了了然后照着网上说......
  • 将获取的['json字段'] 转为csv 文件 - 数据转格式化处理
    用到的函数:1、eval():eval()函数常被称为评估函数,它的功能是去掉参数最外侧引号,变成python可执行的语句,并执行语句的函数。2、isinstance():isinstance()函数来判断一......
  • MySQL中JSON使用
    在使用数据库存储数据时,经常会用到json方式;比如产品的各种属性,这时候又不能确定每一样产品有多少属性,因此直接存json可以避免扩展数据库字段,使之更为灵活.MySQL自5.......
  • JS 串口 16进制数据累加和取低位
    JS串口16进制数据累加和取低位,16进制字符串所有字节加起来,再取余functioncheckEnd(str){letitotal=0,len=str.length,num=0;while(num<le......