• Vue切换回页面可见状态后,避免执行多次滚动定位的动画


    目录

    一. 问题场景描述

    二. 问题解决方案

    三. 相关知识点

    四. 注意点

    五. 相关代码实现


    一. 问题场景描述

            vue里的一个页面组件涉及到音频文件的自动播放,并且在自动播放时要自动滚动聚焦定位到对应的语音文本列表项,那么当用户点击了自动播放后,点击浏览器的其它标签页页面 或者 打开了电脑的其它软件完全遮盖住了 该页面,那么过了一段时间,再重新查看浏览器的该页面时,该页面里累积的自动滚动聚焦定位动画会连续执行,一直到积攒的未执行的自动滚动聚焦定位动画全部执行完后才会停止,而页面看起来就是连续快速定位多次,会严重影响到用户体验。

    二. 问题解决方案

            通过监听window对象的visibilitychange事件来知道当前页面的可见性,当页面不可见时保存最后一次应该去滚动定位的锚点,当页面切换回可见状态时,检查是否存在需要去滚动定位的锚点,如果有,则执行一次滚动定位 并清空 保存的 应该去执行滚动定位的锚点。

    三. 相关知识点

            window对象的visibilitychange事件 可以在 支持W3C规范的现代浏览器上使用,是当页面的可见性状态发生更改时触发的事件,该事件可用于监测页面是否处于活动状态或隐藏状态。

    四. 注意点

            当页面刚加载时,e.target.visibilityState的值会是"hidden" 而不是 "visible",因为visibilitychange事件是在页面可见性状态发生改变时触发的,而当页面刚加载完成时,默认情况下页面处于隐藏状态,因此事件会被触发,而e.target.visibilityState的值会被设置为"hidden",而非预期的"visible",因此需要针对这个特殊情况进行特殊处理。

    五. 相关代码实现