在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>