强迫；“过卷”；在Chrome/Mac上使用javascript

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

---

我怎样才能用javascript强制窗口像这样过度滚动？

这不是最终的解决方案，因为我认为动画并不完美，而且它实际上只适用于台式机，但它至少可以让您开始。我所做的是增加身体的高度，以便在滚动上进行动画

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

$（文档）.on（'scroll mousewheel'，函数（e）{
//检查鼠标滚轮是否向下滚动（或根本不使用）
如果（！e.originalEvent | |！e.originalEvent.wheelDeltaY
||e.OriginaleEvent.wheelDeltaY<0）{
如果（$（窗口）.height（）+$（此）.scrollTop（）==$（此）.height（））{
//防止同时触发动画
if（！$（“body”）.data（'bouncing'））{
$（“body”）.height（函数（u，h）{return h+15；}）
.数据（“反弹”，真）；
$（“body，html”）.animate({
“scrollTop”：“+=15”
}制作动画({
“scrollTop”：“-=15”
}，{持续时间：125，完成：函数（）{
$（this）.height（函数（h，h）{returnh-15；}）
.数据（“反弹”，错误）；
}});
}
}
}
}).on（'keydown'，功能（e）{
//“向下”箭头；按下页面底部时仍会反弹
如果（e.which=='40'）{
$（this.trigger（'scroll'）；
}
});

我一直在玩这个版本，它使用一个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>

var$doc=$（文档）；
$doc.ready（函数（）{
变量$wnd=$（窗口），
$oscroll=$（“#overscroll”），
block=false；
$wnd.bind（'scroll'，函数（）{
如果（！块）{
block=true；
var scrollTop=$wnd.scrollTop（），
wndHeight=$wnd.height（），
docHeight=$doc.height（）；
试一试{
如果（滚动顶部+（wndHeight+120）>docHeight）{
$oscroll.slideUp（'slow'）；
}
如果（$oscroll.css（'display'）='none'
&&（滚动顶部+（wndHeight+120）