实现页面滚动特定焦点位置/页面偏移

常见需求1

1.从页面A跳转到页面B（跨页面）当从页面B返回页面A的时候，页面A还重新定位到原来的焦点

实现方案：

通过生命周期

beforRouterLeave记录偏移量

beforRouterEnter修改焦点位置

常见需求2

非跨页面，通过tag跳转详情页/编辑页，返回主列表时 重新定位位置，并将该条高亮展示

实现方案：

原理同方案1，通过点击详情记录偏移位置，返回onClose的时候页面滚动

此时需要注意，$nextTick必须要有，window.scroll执行应该在页面已渲染完加载

高亮实现:

思路1，记录选中行id，将该行赋值class样式，高亮展示

思路2，利用element 原生 table 赋值:highlight-current-row="true"

思路1优势可以自定义高亮样式，缺点并且高亮在什么时候取消，渐隐渐显等效果 实现复杂

此处采用思路二，利用element 原生事件，highlight-current-row="true" 当点击该行，自动高亮,原生样式，点击其他行，高亮消失消失

扩展：

页面滚动的时候出现浏览器警告提示

Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive。

将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页面更具响应性

chrome 浏览器检测机制，给予指定属性冒事性能就更好。没法验证。

解决方案：

npm i default-passive-events -S

在main.js引入import 'default-passive-events'

同时发现解决了跳转回来highlight-current-row="true" 高亮很快消失的bug

常见需求3

搜索某个元素 ，页面定位到该位置

实现思路

动态给该元素增加id，获取到该元素的id值，计算元素的偏移量。window滚动到该位置

扩展知识：

document.getElementById('#anchor5').scrollTop; //滚动后隐藏的内容距离浏览器高度

document.getElementById('#anchor5').offsetTop; //当前元素顶部距离最近父元 document.getElementById('#anchor5').clientHeight; //clientHeight 只包含padding的高度 document.getElementById('#anchor5').offsetHeight; //offsetHeight 包括padding、border、水平滚动但是不包含margrin

document.getElementById(selector).getBoundingClientRect().top //页面距离元素顶部的位置

页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度

页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop - document.documentElement.scrollTop

页面元素距离浏览器工作区顶端的距离 = DOM元素对象.getBoundingClientRect().top;

建议使用getBoundingClientRect，其他都是垃圾

实现滚动

document.getElementById('#anchor5').scrollIntoView(true)

该方案，入参为false 底部 true 顶部

实例：

1. var element = document.getElementById("box");

2. element.scrollIntoView();

3. element.scrollIntoView(false);

4. element.scrollIntoView({block: "end"});

5. element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

该方案对居中，以及滚动动画没有做到很好的支持。有较多要求的情况下，建议还是采用window.scroll原生

举例居中计算

   top = document.getElementById(selector).getBoundingClientRect().top + document.documentElement.scrollTop - window.innerHeight / 2;
   window.scroll({
       top: top,
       left: 100,
       behavior: 'smooth'
   });