vue3监听滑动监听距离顶部距离

最新推荐文章于 2024-03-20 10:17:56 发布

原创最新推荐文章于 2024-03-20 10:17:56 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端

收录于

文章介绍了如何在Web开发中使用visualViewport对象来跟踪用户滚动时距离页面顶部的距离，并通过事件监听函数doScroll进行处理，确保在页面滚动时能获取到可视视口的位置信息。在组件挂载和卸载时分别添加和移除事件监听，以优化性能。

看了很多要么没用要么用插件发现一个参数visualViewport该对象表示当前窗口的可视视口

const a = window
onMounted(() => {
  window.addEventListener('scroll', doScroll, true)
})
onUnmounted(() => {
  el.removeEventListener("scroll", doScroll)
})
const doScroll = (event) => {
  console.log('距离顶部距离', a.visualViewport.pageTop)
  // console.log(event.target.scrollTop, '1111');
}