CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
dimirc
dimirc

Reputation: 6605

Force "overscrolling" at Chrome/Mac with javascript

When you get to the limit of document, you can keep scrolling and can see an background behing the document before it bounces back (overscrolling).

How can I force the window to overscroll like this with javascript?

Upvotes: 3

Views: 625

Answers (2)

Mark Graham
Mark Graham

Reputation: 171

I've been playing with this version that imitates the effect using a div, that slides in and out of view at the bottom of the page. If you have a high res monitor, you may need to increase the height of the main div to test it.

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

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

This is not the ultimate solution since I think the animation is imperfect and it's really only for desktops, but it can at least get you started. What I have done is increase the height of the body for animation on scroll.

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

Upvotes: 1

Related Questions