上部または下部のdivにスクロールすると、一方向にスクロールしないようにする

Question

私はスクロール可能なdivを持っていて、ユーザーが特定のポイントに到達するとスクロールしてからスクロールしないようにします。

fixed.addEventListener('mousewheel', function(e) { 
    if((fixed.scrollTop;+500)>fixed.scrollHeight;){ 
     e.preventDefault(); 
     } 
    }, false); 

現在、私が持っていることは、その点に達すると一斉にスクロールを止めるという仕事です。 ifステートメントを入力すると、ユーザーはスクロールして元に戻すことができます。すべて

Answer 1

をスクロールmousewheelイベントは標準ではありません停止しないことがあっても、あなたのソリューションは、例えば、タッチデバイスをカバーする、またはスクロールバーをドラッグしてスクロールしないだろうしかし、https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

を参照してください。そして、スクロールが進行中で、それが停止することはできませんされると、一般的に、あなたはタッチデバイス上で、たとえば、最初の場所で起こってからそれを防ぐことができます。

window.addEventListener('touchmove', function(e) { 
    e.preventDefault(); 
}); 

それはスクロールをオフとして、それは非常に悪い習慣ですがズームを完全に行います。

問題は、起こる前にスクロールの方向を判断できないことです。私がそれを見る唯一の方法は、scrollイベントを見て、ページのスクロールが上向きか下向きかを判断し、その上にscrollToを設定してください。そうしたくない場合は、厄介なジャンプを引き起こす可能性があります。なぜあなたはあなたがまた1自分

をhttps://lodash.com/docs/4.16.4#debounceようdebounce機能のいくつかの種類でそれをラップ検討するか、書き込み可能性があるのでscrollイベントは、LOTを発射することができます

var lastScrollPosition = fixed.scrollTop; 

fixed.addEventListener('scroll', function() { 
    var goingDown = (fixed.scrollTop - lastScrollPosition) > 0; 
    /* If scrolling down the new scrollTop will be larger 
     than the last one so it will be a positive number 
     and we want to stop that from happening 
    */ 
    var maximumScrollReached = (fixed.scrollTop + 500 > fixed.scrollHeight); 

    if (goingDown && maximumScrollReached) { 
     fixed.scrollTop = lastScrollPosition; // Or whatever maximum you want to allow 
    } 

    lastScrollPosition = fixed.scrollTop; 
}); 

マインド：たとえば

これを考慮して？あなたの元の問題、おそらくいくつかの純粋なCSSのものに対して、より良い解決策があるかもしれません。