美文网首页
移动端锚点定位,项目实战 经验。

移动端锚点定位,项目实战 经验。

作者: 小码农_影 | 来源:发表于2020-10-20 09:25 被阅读0次

我在项目中采用的元素节点定位,首先是给想要定位的节点添加唯一id,然后点击定位时获取这个唯一节点,来改变scrolltop。简单粗暴代码如下:

if(document.querySelector("#opinion_"+unCheckId[0]) && unCheckId[0]) {

document.querySelector('body').scrollTop=document.querySelector('html').scrollTop =document.querySelector("#opinion_"+unCheckId[0]).offsetTop//先把元素置于最顶端,然后当元素都渲染成功,再减去顶部固定栏的高度

this.$nextTick(function(){//此处的temp是指顶部固定栏的高度

let temp =90

document.querySelector('html').scrollTop=document.querySelector('body').scrollTop =document.querySelector("#opinion_"+unCheckId[0]).offsetTop- temp

})

}

图1

document.querySelector('body').scrollTop=document.querySelector('html').scrollTop

*注意:在移动端锚点定位,一定要这样写,如果单独写document.querySelector('body').scrollTop在电脑端生效好用,但是在手机端不生效,这样写处理兼容问题。

相关文章

网友评论

      本文标题:移动端锚点定位,项目实战 经验。

      本文链接:https://www.haomeiwen.com/subject/ldqwpktx.html