divのJavaScriptスクロールの問題？

Question

ユーザーがdivの上部にスクロールすると、スクロールバーを数px押し下げようとしています。問題は、スクロールが数px（上にスクロールした後）に押し下げられた後でも、マウスがまだクリックされているとき（マウスを下にして）、ブラウザがまだ私のマウスがdivの先頭にあると考えていることです。コードが発火し続けるので、これは悪いことです。私が達成しようとしています

特長：

2. スクロールはdiv要素の先頭にスクロールを数ピクセルを押し下げますが、機能は私のマウスがまだある場合でも、再起動しません。マウスダウン。

私がonscrollによって機能を検出した方法かもしれないと思います。私のコードをテストして、意味が分からない場合はconsole.log()を参照してください。コメントで述べたように

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

は、イベントがDIVがトップであることを焼成にしてログインし続けるという事実は、それが押し下げられ、その後までドラッグされているから、当然の結果でありますスクロールバーが解放されていないため、再び高速になります。私が見る限り、その相互作用をキャンセルする直接的な方法はありません。

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; 

の最短の量のためのオーバーフローを非表示にすることで、スクロールイベントを排除：

しかし、これは、それはマイナーなハックであったとしても、おそらく最速の修正ですカスタムスクロールバーを作成せずに

時間。また、要素の clientWidthを設定することで、元の幅に保ち、アクションが目立たないようにします。