前端实现页面滚动显示画中画效果

最近电脑端在看视频号的内容时, 滚动查看评论, 会出现画中画的效果

不知道大家有没有留意到这种优化
这种是如何实现呢?
其实看到这种优化功能, 作为一个前端开发, 首先会想到监听了滚动, 然后计算了卷出去的距离, 超过一定的值, 去生成一个画中画效果, 反之关闭
有没有画中画的API呢,
是有的, 之前讲到过
前端借助 Document Picture-in-Picture API 实现画中画功能
我们来实现一下这个功能
首选计算页面卷出去的距离

这是视频内容

页面滚动
这样页面就可以滚动了
接下来, 我们监听一下滚动, 获取垂直滚动的距离
const videoIdObj = document.querySelector(‘#videoId’).getBoundingClientRect()
window.addEventListener(‘scroll’, (e) => {
console.log(window.scrollY – videoIdObj.height)
})
只要打印的值大于0, 表明视频dom已经不在视野中了, 我们需要展示画中画效果
let pip = null

if (!pip) {
pip = await window.documentPictureInPicture.requestWindow(
{
width: 200,
height: 250,
}
);
}
pip.document.body.appendChild(
document.querySelector(“#videoId”).cloneNode(true)
);
我们看一下, 计算的距离大于0, 会不会出现画中画

可以显示出来, 随后我们判断小于的时候将其关闭,
if (y <= 0 && pip) {
pip.close();
}
这样, 我们的功能就实现了
该Api属于实验性技术, 对浏览器兼容性较少