scrollIntoView方法滚动当前元素,进入浏览器的可见区域
el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);
该方法可以接受一个布尔值作为参数。
如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);
如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。
如果没有提供该参数,默认为true。
锚点定位是一个再熟悉不过的操作了,通常会用a标签href=#XX去实现,不过这样做,有一个问题,就是页面会有刷新感,而且地址栏会有变化,F5刷新,则#XXX还是显示在地址栏里,这样如果要进一步进行有关地址栏url的操作,就不得不再做些判断,所以寻找一些新的方法。如果要求不是很高,scrollIntoView()这个方法就可以取代传统锚点定位,它是利用滚动原理,来将相应的元素滚动到可是区域内。接下来看看详细的介绍。
首先需要说明的是,这个方法并没有写入标准,但是大多数主流浏览器已经支持或部分支持其功能了,所以可以放心使用,当然如果有朝一日标准出来了,那就按标准来吧。其次要说明的是,这是js原生方法,jquery等框架是使用不了的,所以,获得元素的方法一定是document.getElementById或querySelector,然后才可以点出来scrollIntoView()方法。
官方参数
参数介绍:直接上官方看api介绍比较清晰(https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView)
使用介绍
页面一定要能滚动,这个方法才会生效,否则,你让我如何给你滚动呢?
//这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方(有兼容性问题)
document.querySelector("#title-part").scrollIntoView({ block: 'end', behavior: 'smooth' }) //这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方(有兼容性问题)
document.querySelector("#article-part").scrollIntoView({ block: 'start', behavior: 'smooth' }) //这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方(无滚动动画效果)
document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写 //这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方(无滚动动画效果)
document.querySelector("#titleMU-part").scrollIntoView(false)
今天的文章js里scrolltop怎么用_scroll view分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/50819.html