Prevent auto scroll while dragging over a scrollable container

Question

Example here: http://codepen.io/eliseosoto/pen/YqxQKx

const l = document.getElementById('scrollableList');
const item3 = document.getElementById('item3');

l.addEventListener('mouseover', function(e) {
  e.stopPropagation();
  e.preventDefault();
  console.log('mouseover', e.target);
});

item3.addEventListener('dragenter', function(e) {
  e.stopPropagation();
  e.preventDefault();
  console.log('dragenter', e.target);
});

l.addEventListener('dragover', function(e) {
  console.log('xxx');
  e.stopPropagation();
  e.preventDefault();
});

l.addEventListener('scroll', function(e) {
  console.log('scroll!', e);
  e.stopPropagation();
  e.preventDefault();
});

item3.addEventListener('dragover', function(e) {
  console.log('dragover item3');
  e.stopPropagation();
  e.preventDefault();
});

#container {
  background-color: lightblue;
}

#scrollableList {
  height: 50px;
  background-color: green;
  overflow: auto;
}

<div id="container">
  <br>
  <div id="scrollableList">
    <div>Item 1</div>
    <div>Item 2</div>
    <div id="item3">Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
    <div>Item 11</div>
    <div>Item 12</div>
    <div>Item 13</div>
    <div>Item 14</div>
  </div>
  <br>
  <div id="dragMe" draggable="true">Drag me near the top/bottom of the Item list.</div>
</div>

Notice that when you drag the "Drag me.." text near the top/bottom of the Item list, the list it will scroll automatically.

Usually that behavior is useful because you can put into view the desired drop zone, but sometimes that is not desired at all.

Is there a pure JS way to disable that behavior in Chrome 47+? I tried with 'dragover', 'mouseover', 'scroll', etc on different elements to no avail.

Answer 1

I was able to accomplish this by storing the current position of the scroll and when the scroll event is raised, I set the scrollTop to the previously stored position.

const list = document.getElementById('scrollableList');
const dragMe = document.getElementById('dragMe');

var scrollPosition = 0;

dragMe.addEventListener('dragstart', function(e) {
  scrollPosition = list.scrollTop;
  list.addEventListener('scroll', preventDrag);
});

dragMe.addEventListener('dragend', function(e) {
  list.removeEventListener('scroll', preventDrag);
});

function preventDrag(e) {
    list.scrollTop = scrollPosition;
};

It's very odd you cannot cancel the scroll event.

http://codepen.io/cgatian/pen/JXZjOB?editors=1010