2016-04-19 12 views
1

Beispiel hier ziehen über: http://codepen.io/eliseosoto/pen/YqxQKxPrevent Autoscroll während einem scrollbaren Container

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>

Beachten Sie, dass, wenn Sie ziehen Sie das "me Ziehen .." Text in der Nähe der oberen/unteren Rand der Nachrichten Liste, die Liste wird automatisch gescrollt.

Normalerweise ist dieses Verhalten nützlich, weil Sie die gewünschte Drop-Zone anzeigen können, aber manchmal ist das überhaupt nicht erwünscht.

Gibt es eine reine JS-Methode, um dieses Verhalten in Chrome 47+ zu deaktivieren? Ich habe versucht, mit 'Dragover', 'Mouseover', 'Scroll' usw. auf verschiedene Elemente vergeblich.

Antwort

0

Ich konnte dies erreichen, indem ich die aktuelle Position der Bildlaufleiste speicherte und wenn das Bildlaufereignis ausgelöst wurde, stellte ich die Bildlaufleiste auf die zuvor gespeicherte 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; 
}; 

Es ist sehr seltsam, dass Sie das Scroll-Ereignis nicht abbrechen können.

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

+0

Sieht aus wie diese Frage hier beantwortet wurde. http://Stackoverflow.com/q/4770025/684869 – cgatian

+0

Danke! Das ist aber immer noch nicht perfekt, es hat ein paar Nachteile: a) Sie müssen die dragstart/dragend Listener zu allem hinzufügen, was Sie über die Liste ziehen können. b) Sie können die Liste weiterhin scrollen lassen, indem Sie über eine Datei ziehen oder Text aus der Liste auswählen und ziehen. –

Verwandte Themen