防ぎ自動スクロールここ

Question

例スクロール可能なコンテナの上にドラッグしながら：あなたが項目の最上部/下部に「私をドラッグ..」テキストをドラッグすること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>

はお知らせリスト、自動的にスクロールするリスト。

通常、この動作は目的のドロップゾーンを表示することができるため便利ですが、時にはそれが望ましくないこともあります。

Chrome 47+でその動作を無効にする純粋なJS方法はありますか？私は 'dragover'、 'mouseover'、 'scroll'など、さまざまな要素を無駄にしようとしました。

Answer 1

スクロールの現在位置を格納することでこれを達成できました。スクロールイベントが発生すると、scrollTopを以前に格納された位置に設定しました。

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; 
}; 

スクロールイベントをキャンセルすることはできません。

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