0

I have a client who would like to change the functionality of their site so that the user begins at the bottom of the site and has to scroll down to navigate up.

So basically, I need a way to reverse the scrolling functionality so that if you scroll down, it scrolls up instead, and vice versa.

I did a bit of research and found this (How can I determine the direction of a jQuery scroll event?), which gave me what I have below to capture the scroll event:

        var lastScrollTop = 0;
        $(window).scroll(function (event) {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                // downscroll code
                alert("DOWN");
            } else {
                // upscroll code
                alert("UP");
            }
            lastScrollTop = st;
        });

This works fine, it identifies if the user scrolls up or down.

But I don't know what I can do to:

  1. Stop the default scroll, and
  2. Scroll in the other direction

Anyone know what I can do here? Or if there's an entirely different way to do this with either a plugin or a different method, I'm up for anything.

Community
  • 1
  • 1
Steven
  • 18,761
  • 70
  • 194
  • 296
  • I'm curious - when a user starts "reverse" scrolling, at what point do you enable "normal" scrolling? Do you reverse scroll until the user is back at the top of the page? Or, do you allow them to start scrolling again after some time? It's such a weird interaction... – Jack Sep 23 '14 at 00:58
  • @JackPattishall - it never goes back to normal scrolling. Down/up is always up/down. And yes, I agree about the weird interaction :) I guess they want the appearance of "you scroll down, and the content moves down" – Steven Sep 23 '14 at 01:01
  • 1
    AH, I got you. Sorry, I mis-understood your requirements. I actually thought you were reverse scrolling when you reached the bottom of the page! Your initial state or starting point is the bottom of the page?? And then, as a user "scrolls down", the page scrolls up? – Jack Sep 23 '14 at 01:25
  • Would the user see the scrollbar? (That they're at the bottom of the page?) Could they draw the "thumb" to scroll back up to the top? (Or, do you want that hidden?) – Jack Sep 23 '14 at 01:30

1 Answers1

2

Here's a quick fiddle thrown together:

http://jsfiddle.net/fmwpuu9g/

Basically, you want to capture the mousewheel event (or DOMMouseScroll event) and prevent the default.

Documentation for both:

MouseWheel: https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel (Most major browsers) DOMMouseScroll: https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll (FireFox/Gecko)

Unfortunately, as you can see, it's not a "standard", so support isn't guaranteed....

One thing to point out is that the offset is 10px. While this is hardcoded (and may be what your client is looking for), it's not ideal - since you expect inertia. In addition, this was tested with a MacBooK Pro with "normal" scrolling disabled (scrolling up is down or something) - so I'm not sure how that plays into the delta aspect.

Finally, if the desire is to remove the scrollbar, you can just offset the top position of the container.

Good luck!

Jack
  • 9,151
  • 2
  • 32
  • 44
  • This is fantastic! Exactly what I was looking for. I'm not sure about the scrollbar being visible or not, but I'm not sure I'm understanding what you're suggesting by offseting the top position of the container. How would I modify this? – Steven Sep 23 '14 at 01:52
  • 1
    Hi Steven! Great man. Regarding the scrollbar - say the client wants you to hide the scrollbar. You're then manipulating the overflow (rather than the scroll bar) - so you're offset is of the `top` position. Something like this: http://jsfiddle.net/fmwpuu9g/1/ – Jack Sep 23 '14 at 07:09