javascript - 使用 javascript 在 Chrome/Mac 上强制 "overscrolling"

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');
    }
 });