divがページ上の固定位置に達するとスクロールを停止する

Question

DIVが表示されているときにスクロールを止めようとしているときに、ユーザーがページをスクロールするときにビューポートの中央に表示されます。

ページが停止し、ユーザーがスクロールすると、DIVの内容が水平にスクロールしてから、ユーザーがスクロールを続けることができます。

function pauseScroll() { 
     // $(document).bind('mousewheel DOMMouseScroll', function() { 
     disableScroll(); 

     console.log('trying to scroll Card: ' + selCard); 

     setTimeout(pauseStop(), 500); 
     slideCard(selCard); 
     // }); 
    } 

    function pauseStop() { 
     console.log('Pause Stop'); 
    } 

    function unpauseScroll() { 
     // $(document).unbind('mousewheel DOMMouseScroll'); 
     enableScroll(); 
     document.getElementById("status").innerHTML = "enabled"; 
     document.getElementById("status").className = "enabled"; 
    } 


    // left: 37, up: 38, right: 39, down: 40, 
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 
    var keys = { 
     37: 1, 
     38: 1, 
     39: 1, 
     40: 1 
    }; 

    function preventDefault(e) { 
     e = e || window.event; 
     if (e.preventDefault) 
      e.preventDefault(); 
     e.returnValue = false; 
    } 

    function preventDefaultForScrollKeys(e) { 
     if (keys[e.keyCode]) { 
      preventDefault(e); 
      return false; 
     } 
    } 

    function disableScroll() { 
     if (window.addEventListener) // older FF 
      window.addEventListener('DOMMouseScroll', preventDefault, false); 
     window.onwheel = preventDefault; // modern standard 
     window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
     window.ontouchmove = preventDefault; // mobile 
     document.onkeydown = preventDefaultForScrollKeys; 
    } 

    function enableScroll() { 
     if (window.removeEventListener) 
      window.removeEventListener('DOMMouseScroll', preventDefault, false); 
     window.onmousewheel = document.onmousewheel = null; 
     window.onwheel = null; 
     window.ontouchmove = null; 
     document.onkeydown = null; 
    } 


    $(window).scroll(function() { 
     if ($("div").hasClass("cardstop")) { 

      var top_of_element = $(".cardstop").offset().top; 
      var bottom_of_element = $(".cardstop").offset().top + $(".cardstop").outerHeight(); 
      var bottom_of_screen = $(window).height() 
      var top_of_screen = $(window).scrollTop(); 
      var elHeight = bottom_of_element - top_of_element; 
      var topSpace = ((($(window).height()) - elHeight)/2); 
      var scrollFix = top_of_screen + topSpace; 

      //top_of_screen 
      var st = $(this).scrollTop(); 
      if (st > lastScrollTop) { 
       // downscroll code 
       console.log('Top of el: ' + top_of_element); 
       console.log('TopScreen: ' + top_of_screen); 
       console.log('Space: ' + topSpace); 
       console.log('Bot of el: ' + bottom_of_element); 
       console.log('BotScreen: ' + bottom_of_screen);; 

       if (top_of_element < scrollFix) { 

        if (selCard = 1) { 
         console.log('One to Two'); 
         pauseScroll(); 
         selCard = 2; 
        } else if (selCard = 2) { 
         pauseScroll(); 
         selCard = 1; 
        } 
        unpauseScroll(); 
       } 
      } else { 
       // upscroll code 
       console.log('Scroll Up: '); 

       if (selCard = 3) { 
        console.log('3 to 2'); 
        pauseScroll(); 
        selCard = 4; 
       } 

       if (selCard = 4) { 
        pauseScroll(); 
        unpauseScroll(); 
       } 
      } 
      lastScrollTop = st; 

      // if (bottom_of_screen > top_of_element) { 

      // The element is visible, do something 
     } 

    }); 

このプロセスは、カードの内容をあまりにも速くスクロールさせ、次に移動するという仕組みです。

私がどこに間違っているかについての指針は素晴らしいでしょう。

よろしく

私は[jsfiddle]にモックアップを追加しました：私はこのJSツールを使用することができ認めるだろうhttps://jsfiddle.net/stato74/sjtp9wv3/2/

Answer 1

：ウェイポイント http://imakewebthings.com/waypoints/

あなたがハードな方法を好む場合は、 div {overflow-y = scroll}

これにより、ページ全体ではなくdivをスクロールさせることができます。 （必要な場合）私は後でいくつかの時間を見つける場合、私はこのためのコードを提供することができます

Answer 2

scrollTopの最大値は、それがscrollHeightだ、scrollHeightではありません - outerHeight。

これはあなたに正しい値得られます：

var elem = $("body"); 
var maxScrollTop = elem[0].scrollHeight - elem.outerHeight(); 
$(document).scroll(function(){ 
    if(e.target.scrollTop > maxScrollTop){ 
    e.target.scrollTop = maxScrollTop ; 
    } 
});