## 2017-10-24

Experimenting with PointerEvents... after long hours of trying to capture the pointer, I finally succeeded! Setting the "touchAction" to none will prevent the page scrolling. 

```javascript
that.style.touchAction = "none"

lively.removeEventListener('xxx', that)
lively.addEventListener('xxx', that, 'pointerover', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("pointerover")
}, true)
lively.addEventListener('xxx', that, 'pointerdown', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("pointerdown")
  that.setPointerCapture(evt.pointerId)
}, true)
lively.addEventListener('xxx', that, 'pointermove', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("pointermove")
}, true)
lively.addEventListener('xxx', that, 'pointerup', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("pointerup")
  that.releasePointerCapture(evt.pointerId)

}, true)
lively.addEventListener('xxx', that, 'pointercancel', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("pointercancel")
}, true)
lively.addEventListener('xxx', that, 'pointerleave', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("pointerleave")
}, true)
lively.addEventListener('xxx', that, 'gotpointercapture', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("gotpointercapture")
}, true)
lively.addEventListener('xxx', that, 'lostpointercapture', (evt) => {
  evt.stopPropagation()
  evt.preventDefault()
  lively.notify("lostpointercapture")
}, true)
```


### Experimenting with Scroll // and Wheel events


The scroll events can only be used to react on scrolling.

```javascript
lively.removeEventListener("dev", window)
lively.addEventListener("dev", window, "scroll", (evt) => {
  lively.notify("scroll " + document.documentElement.scrollTop)
  evt.preventDefault()
  evt.stopPropagation()
})
```


Wheel events can be used to intercept the scrolling behavior.

```javascript
lively.removeEventListener("dev", window)
lively.addEventListener("dev", window, "wheel", (evt) => {
  var element = evt.path.find(ea => {
    try {
      var style = getComputedStyle(ea)    
    } catch(e) {}
    if (style && (style.overflowY == "auto" ||  style.overflowY == "scroll")) {
      return true
    }
  })
  if (element) {    
    if (evt.deltaY > 0 && Math.round(element.scrollHeight - element.scrollTop) === element.clientHeight) {
      evt.preventDefault()
      evt.stopPropagation()  
    }
    if (evt.deltaY < 0 && Math.round(element.scrollTop) === 0) {
      evt.preventDefault()
      evt.stopPropagation()  
    }
  }  
})
```