元素滚动时禁止父元素滚动 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import Vue from 'vue'
// from: http://www.zhangxinxu.com/wordpress/2015/12/element-scroll-prevent-parent-element-scroll-js/
function handleStopScroll (e) {
  let el = e.currentTarget
  let scrollTop = el.scrollTop
  let scrollHeight = el.scrollHeight
  let height = el.clientHeight
  let delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0)
  console.log(scrollTop, scrollHeight, height, delta)
  // delta > 0 上滚
  // delta < 0 下滚
  if ((delta > 0 && scrollTop <= delta) ||
    (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
    el.scrollTop = delta > 0 ? 0 : scrollHeight
    event.preventDefault()
  }
}
let eventType = 'mousewheel'
if (window.document.mozHidden !== undefined) {
  eventType = 'DOMMouseScroll'
}
Vue.directive('stop-scroll', {
  bind () {
    this.el.addEventListener(eventType, handleStopScroll, false)
  },
  unbind () {
    this.el.removeEventListener(eventType, handleStopScroll)
  }
})