监听鼠标滚轮事件，与控制div（top距离）

最新推荐文章于 2024-09-10 13:23:11 发布

长安城中一市民

最新推荐文章于 2024-09-10 13:23:11 发布

阅读量1.6k

点赞数 1

分类专栏：笔记 vue 文章标签： vue scroll fixed

本文链接：https://blog.csdn.net/wmingcsdn/article/details/90670524

版权

本文介绍如何在Vue应用中监听滚动事件，并通过处理函数调整div的position为fixed，使其随页面滚动保持相对浏览器顶部的距离。同时讨论了在鼠标划入/划出时改变div属性的方法，对比了overflow和fixed定位的使用场景。

摘要由CSDN通过智能技术生成

mounted() {

window.addEventListener(‘scroll’, this.handleScroll) // 监听滚轮事件

  // window.onmousewheel = function () {  //触发滚轮事件
  //   document.getElementsByClassName('boxBt')[0].style.position = 'fixed'
  //   let nnn = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  //   console.log(nnn)
  //   document.getElementsByClassName('boxBt')[0].style.top = (324-nnn)+'px'
  // }

}

methods: {
handleScroll () {
// document.getElementsByClassName(‘boxBt’)[0].style.position = ‘fixed’
// let nnn = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// document.getElementsByClassName(‘boxBt’)[0].style.top = (324-nnn)+‘px’

div到浏览器顶部的距离
console.log(document.getElementById(‘div2’).offsetTop)
},

鼠标的划入/划出方法（改变div属性）采用overflow划定不