Problema di scorrimento JavaScript in div?

Question

Sto provando a spingere la barra di scorrimento di alcuni px quando l'utente scorre verso la parte superiore del div. Il problema è che dopo che lo scroll è stato premuto per alcuni pixel (dopo averlo fatto scorrere verso l'alto) il browser pensa ancora che il mio mouse sia in cima al div quando il mio mouse è ancora cliccato (sul mouse). Questo è un male dato che il codice continua a sparare.

Caratteristiche io sto cercando di realizzare:

1. scorrere fino all'inizio del div

2. scorrimento viene spinto giù un paio di pixel, ma la funzione non si accende di nuovo, anche se il mio mouse è ancora sul mouse verso il basso

Penso che potrebbe essere il modo in cui ho rilevato la funzione tramite onscroll. Si prega di testare il mio codice e vedere il console.log() se non ho senso.

var wrapper = document.getElementById('scroll-box'); 
 
wrapper.onscroll = function (evt){ 
 
    //detect when scroll has reached the top of the frame 
 
    if(wrapper.scrollTop === 0){ 
 
     console.log('top of frame'); 
 
     wrapper.scrollTop += 500; 
 
    } 
 

 
    //detect when scroll has reached the bottom of the frame 
 
    if(wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight){ 
 
    console.log('bottom of frame'); 
 
    } 
 
} 
 

 
wrapper.scrollTop += 3000;

.scroll-box { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-color: gray; 
 
    overflow-y: scroll; 
 
} 
 
    
 
div ul li { 
 
    padding: 50px; 
 
}

<div class="scroll-box" id="scroll-box"> 
 
    <ul> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    <li>messages</li> 
 
    </ul> 
 
</div>

Answer 1

Come accennato nei commenti, il fatto che l'evento continuerà a fuoco e la registrazione che il div è al top è un risultato naturale da esso che è spinto verso il basso e poi trascinato fino di nuovo rapidamente perché la barra di scorrimento non è stata rilasciata. Per quanto posso vedere, non esiste un modo diretto per cancellare quell'interazione.

Ma senza creare una barra di scorrimento personalizzato questa è probabilmente la soluzione più rapida, anche se si tratta di un hack minore:

Demo

var wrapper = document.getElementById('scroll-box'), 
size = wrapper.clientWidth; 

wrapper.addEventListener('scroll', function() { 

    if (!wrapper.scrollTop) { 
    console.log('top of frame'); 
    wrapper.scrollTop += 500; 
    wrapper.setAttribute('style', 'width: ' + size + 'px; overflow: hidden'); 
    setTimeout(function() { 
     wrapper.removeAttribute('style'); 
    }, 0); 
    } 
}); 

wrapper.scrollTop += 200; 

Eliminando l'evento di scorrimento nascondendo troppo pieno per il minor numero possibile di tempo. E anche l'impostazione di clientWidth dell'elemento per far sì che mantenga la sua larghezza originale in modo che l'azione sia meno evidente.