前情提要


今天开发的时候发现，在页面滚动的时候，缩放的元素也一起滚动了，于是需要判断是否在缩放元素内滚动，查了下实现方式，遂记录一下


实现方式

function wheelAction (e) {
  let x = e.pageX
  let y = e.pageY
  let canvas = this.$refs.canvas
  let rect = canvas.getBoundingClientRect()
  let y1 = rect.top
  let y2 = y1 + rect.height
  let x1 = rect.left
  let x2 = x1 + rect.width
  if (x < x1 || x > x2 || y < y1 || y > y2) {
    // 不在元素内
  } else {
    // 在元素内
  }
}
// 针对火狐的事件
window.addEventListener('DOMMouseScroll', wheelAction)
// 针对google，mousewheel非标准事件已被弃用
window.addEventListener('wheel', wheelAction)
// 兼容IE，ie不支持wheel事件
window.addEventListener('mousewheel', wheelAction)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.