在Chrome/Mac上使用javascript強制「過度滾動」

Question

當您達到文檔限制時，您可以繼續滾動並在文檔彈回（超滾動）之前看到文檔背景。

我該如何強制這個窗口像這樣javascript過度滾動？

Answer 1

這不是最終的解決方案，因爲我認爲動畫是不完美的，它只適用於桌面，但它至少可以讓你開始。我所做的是在滾動上增加動畫的身體高度。

$(document).on('scroll mousewheel', function (e) { 
    //Check for mousewheel scrolling down (or not used at all) 
    if (!e.originalEvent || !e.originalEvent.wheelDeltaY 
     || e.originalEvent.wheelDeltaY < 0) { 
     if ($(window).height() + $(this).scrollTop() == $(this).height()) { 
      //Prevent simultaneous triggering of the animation 
      if (!$("body").data('bouncing')) { 
      $("body").height(function (_, h) { return h + 15; }) 
       .data('bouncing', true); 
      $("body, html").animate({ 
       'scrollTop': '+=15' 
      }, 125).animate({ 
       'scrollTop': '-=15' 
      }, {duration: 125, complete: function() { 
       $(this).height(function (_, h) { return h - 15; }) 
        .data('bouncing', false); 
      }}); 
      } 
     } 
    } 
}).on('keydown', function (e) { 
    //The "down" arrow; still bounces when pressed at the bottom of the page 
    if (e.which == '40') { 
     $(this).trigger('scroll'); 
    } 
}); 

Answer 2

我一直在玩這個版本，它使用div來模擬效果，該效果在頁面底部滑入和滑出視圖。如果你有一個高分辨率的顯示器，你可能需要增加主分區的高度來測試它。

<div id="main" style="background:#f5f5f5;height:1000px"></div> 
<div id="overscroll" style="background:#666666;height:120px"></div> 

<script type="text/javascript"> 
    var $doc = $(document); 
    $doc.ready(function() { 

     var $wnd = $(window), 
      $oscroll = $('#overscroll'), 
      block = false; 

     $wnd.bind('scroll', function() { 
      if (!block) { 
       block = true; 

       var scrollTop = $wnd.scrollTop(), 
        wndHeight = $wnd.height(), 
        docHeight = $doc.height(); 

       try { 
        if (scrollTop + (wndHeight + 120) > docHeight) { 
         $oscroll.slideUp('slow'); 
        } 
        else if ($oscroll.css('display') === 'none' 
         && (scrollTop + (wndHeight + 120) < docHeight)) { 
         $oscroll.slideDown(); 
        } 
       } finally { 
        block = false; 
       } 
      } 
     }); 
    }); 
</script>