touch action none test

by dfreedm

HTML

<div class="none">
    <div id="scroller"></div>
</div>
<br>
<div class="none">
    <div id="regular"></div>
</div>

CSS

.none {
    -ms-touch-action: none;
    border: 10px solid red;
}

.none > * {
    border: 10px solid green;
    overflow: auto;
    height: 200px;
}

* { box-sizing: border-box; }

JavaScript

var s = document.getElementById('scroller');
var t = document.getElementById('regular');
for (var i = 0; i < 1000; i++) {
    var d = document.createElement('div');
    d.textContent = i;
    s.appendChild(d);
}
var gotMove = function(e) {
    var target = e.currentTarget;
    target.style.border = '10px solid blue';
    setTimeout(function(){ target.style.border = ''; }, 1000);
};
s.addEventListener('MSPointerMove', gotMove);
t.addEventListener('MSPointerMove', gotMove);
s.parentNode.addEventListener('MSPointerMove', gotMove);
t.parentNode.addEventListener('MSPointerMove', gotMove);