3

当您达到文档的限制时，您可以继续滚动，并且可以在文档反弹（过度滚动）之前看到文档的背景。

如何使用javascript强制窗口像这样过度滚动？

4

2 回答 2

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');
    }
 });
于 2013-02-23T01:59:27.587 回答
1

我一直在玩这个版本，它使用 div 模拟效果，在页面底部滑入和滑出视图。如果你有一个高分辨率显示器，你可能需要增加主 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>
于 2013-02-23T02:19:12.997 回答