Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make mouse wheel scroll to section like in mediafire.com [closed]

I came across the home page of this website http://www.mediafire.com/, in which when you roll the mouse wheel the page position itself automatically to the next section in the page. I like to know how its done. Can anyone help me with this. Thanks in advance.

Regards, Aswin

like image 875
winnyboy5 Avatar asked Jan 30 '14 07:01

winnyboy5


People also ask

How do I lock my Mouse scroll wheel?

Navigate to HKEY_CURRENT_USER\Control Panel\Desktop and set WheelScrollChars and WheelScrollLines to 0. A reboot is necessary for this to take affect. This will disable scrolling, not the button itself. PS: If you open the Mouse setting in the Control Panel, it will reset those settings back to 3.

How do I change my Mouse scroll settings?

To change how the mouse wheel works Click the Wheel tab, and then do one of the following: To set the number of lines the screen will scroll for each notch of mouse wheel movement, under Vertical Scrolling, select The following number of lines at a time, and then enter the number of lines you want to scroll in the box.


1 Answers

I think this type of animation is probably hard to take in especially someone new to jQuery. This involves scrolling, catching the mousewheel events, delay in animations, and most of all getting it to work properly on cross browsers and on mobile browsers' swipe and touch events. If you don't have a solid understanding I would suggest you to use a plugin. These two are the best: One Page Scroll and Full Page.

I can only show you the basic method on how to get this done on cross browsers, if you want it to work properly on mobile you should do your part and add the swipe and touch events. :)

//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element 
 this will serve as our indicator*/
$('section').first().addClass('active');

/* handle the mousewheel event together with 
 DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();//prevent the default mousewheel scrolling
    var active = $('section.active');
    //get the delta to determine the mousewheel scrol UP and DOWN
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    //if the delta value is negative, the user is scrolling down
    if (delta < 0) {
        //mousewheel down handler
        next = active.next();
        //check if the next section exist and animate the anchoring
        if (next.length) {
           /*setTimeout is here to prevent the scrolling animation
            to jump to the topmost or bottom when 
            the user scrolled very fast.*/
            var timer = setTimeout(function () {
                /* animate the scrollTop by passing 
                the elements offset top value */
                $('body, html').animate({
                    scrollTop: next.offset().top
                }, 'slow');

                // move the indicator 'active' class
                next.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 800);
        }

    } else {
        //mousewheel up handler
        /*similar logic to the mousewheel down handler 
        except that we are animate the anchoring 
        to the previous sibling element*/
        prev = active.prev();

        if (prev.length) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: prev.offset().top
                }, 'slow');

                prev.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 800);
        }

    }
});

Here is a demo: jsfiddle.net/NGj7F/

like image 62
Mark S Avatar answered Oct 10 '22 01:10

Mark S