Switch tabs based on mouse scroll

Question

I would like to have a widget on a webpage containing a number of tabs. When the user scrolls the page and the widget comes in to view and he keeps scrolling down, the tabs should be activated one by one (without the page scrolling further down). Once the last tab is showing, the page should resume scrolling as usual. Is this doable using JS/jQuery?

UPDATE: Since this seems too broad a question: The problem is, I don't know how to use the scroll offset and prevent the page from scrolling down until I decide it can resume its normal behavior

UPDATE 2 I created This fiddle,

$(document).ready(function(){

    $('#tabbed').mouseover(function(){
        $(this).focus();
    }).scroll(function(){
        console.log("scrolling tabs");
    });

    $(window).scroll(function(evt){
        var scrollPos = $(this).scrollTop()
        console.log(scrollPos); 

        // BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
        // SCROLLABLE DIV AND GIVE IT FOCUS HERE?
    });
});

it contains a long page and a scrollable div among its contents. The only problem is that the div starts catching scroll events only if I move my mouse. If I could find a bulletproof way to activate the scrolling div whenever the mouse is over it I'm there. Any ideas?

it is doable, if you can try something and has a problem then we can help — Arun P Johny, Jun 10 '13 at 11:32
you may get some insight about in http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — Arun P Johny, Jun 10 '13 at 11:44

score 2 · Accepted Answer · edited May 23 '17 at 11:57

You can't prevent scrolling with javascript. Using iframes and divs with scroll will only work if the mouse is over them.

You can cancel the mouse wheel and keys events related to the scrolling, however the user will be able to scroll using the scrollbar (more here).

Another approach is leaving an empty area and fixing your widget inside this area, like in this working example

$(window).bind('scroll', function()
{
    var scroll = $(window).scrollTop(),
        innerHeight = window.innerHeight || $(window).height(),
        fooScroll = $('#fooScroll'),
        emptyArea = $('#emptyArea'),
        offset = emptyArea.offset(),
        fixedClass = 'fixed';

    if(scroll > offset.top)
    {
        if(scroll < offset.top + emptyArea.height() - fooScroll.height())
        {
            fooScroll.addClass(fixedClass);
            fooScroll.css("top", 0);
        }
        else
        {
            fooScroll.removeClass(fixedClass);
            fooScroll.css("top", emptyArea.height() - fooScroll.height());
        }
    }
    else
    {
        fooScroll.removeClass(fixedClass);
        fooScroll.css("top", 0);
    }
});

Then you can change the tabs while the page is scrolling.

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

You should be able to do this. You can use the jQuery scroll event to run your own code whenever the user scrolls up or down. Also, so long as you call e.preventDefault() whenever the scroll event is fired, you can prevent the whole window from scrolling up or down.

edited May 23 '17 at 11:43

Community

1
1

answered Jun 10 '13 at 12:02

Peter Berg

5,403
7
31
48

1

You can't prevent the scroll event I have found. – Asciiom Jun 10 '13 at 12:06
Ah, sorry about that, I just assumed it would I guess. Haven't done this myself. Not sure whether this will help, but maybe you could try returning false as well at the end of the callback passed to scroll? That will prevent the scroll event from bubbling up to other handlers. – Peter Berg Jun 10 '13 at 12:10
I tried those thing before asking this question, none of them work. Thanks for your suggestion though – Asciiom Jun 10 '13 at 12:15
Something else you probably already know: apparently after googling a bit I discovered that what you want to do is called parallax scrolling (or at least parallax scrolling is similar to what you want). Stellar.js apparently is a library that helps with that. – Peter Berg Jun 10 '13 at 12:20

Switch tabs based on mouse scroll

2 Answers2