javascript - javascript を使用して Chrome/Mac で「オーバースクロール」を強制する

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 の高さを上げてテストする必要がある場合があります。

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