h5页面使用scrollIntoView如果头部有fixed布局会导致滚动条丢失精度的问题

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内

使用:

    let anchorElement = document.getElementById(anchorName);

    anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});

behavior可选

定义动画过渡效果,"auto"或"smooth"之一。默认为"auto"。

block可选

定义垂直方向的对齐,"start","center","end", 或"nearest"之一。默认为"start"。

inline可选

定义水平方向的对齐,"start","center","end", 或"nearest"之一。默认为"nearest"。


问题:如果头部有固定定位导航,就会丢失精度 

如图:


part1部分没有全部展示


解决:

let anchorElementHeight = document.getElementById(anchorName).offsetTop;   // 要跳转元素到offsetParent顶部的距离

let navBar = document.getElementById('navBar').offsetHeight;  //固定头部的高度

let nodes = document.getElementById('container');  //跳转元素的父元素

nodes.scrollTo({

top: anchorElementHeight-(navBar),

    behavior:"smooth"

});

你可能感兴趣的:(h5页面使用scrollIntoView如果头部有fixed布局会导致滚动条丢失精度的问题)