5

I am building a website where the front page is composed of "full-page sections". My end goal is to achieve more or less exactly what this plugin offers:

http://alvarotrigo.com/fullPage/

Except I'd like to avoid including a 1400 line script when I don't really need all that.

I have found an excellent starting point in this question:

How To Scroll down 100% with Mousewheel at once ? - jquery

Here is a fiddle of the code I am currently using (scroll using just one notch of your mouse wheel):

http://jsfiddle.net/JqU2T/5/show/

And the code itself:

$(document).ready(function () {
var divs = $('.mydiv');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
    if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
        dir = 'down';
    } else {
        dir = 'up';
    }
    // find currently visible div :
    div = -1;
    divs.each(function(i){
        if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
            div = i;
        }
    });
    if (dir == 'up' && div > 0) {
        div--;
    }
    if (dir == 'down' && div < divs.length) {
        div++;
    }
    //console.log(div, dir, divs.length);
    $('html,body').stop().animate({
        scrollTop: divs.eq(div).offset().top
    }, 200);
    return false;
});
$(window).resize(function () {
    $('html,body').scrollTop(divs.eq(div).offset().top);
});
});

It works great, however, it is not intuitive and does not account for scroll events which don't take into account the effect. For example a user might start scrolling down the page by rolling their mouse wheel 2 or 3 times before they figure out the effect on the page, by which which point they are already on the 4th slide. The plugin I linked handles this really well however, if a user does scroll several time it will still only take them to the next slide. Again it isn't perfect, but it's good enough for me.

I stumbled upon this question which contains the potential solution:

jQuery Tools Scrollable with Mousewheel - scroll ONE position and stop

I am relatively new to jQuery and was already out of my depth getting as far I have. I have tried implementing the code from the solution into my script various ways, but honestly I don't really know what I'm doing with it.

If any jQuery expert fancies helping me out I would really appreciate it :)

Community
  • 1
  • 1
ESR
  • 1,669
  • 1
  • 18
  • 22

1 Answers1

4

If there's already a plugin for it but you're worried about filesize, I would suggest minifying. It looks like the plugin on github already has the JS minfied into just 38 lines (much better than 1400), you could minify the CSS and concatenate all the CSS files together and it wouldn't be very big at all. Sorry if that's not the answer you were looking for, but that's what I would do. Any production JS and CSS should be minified.

ejfrancis
  • 2,925
  • 4
  • 26
  • 42
  • I just downloaded it, the minified plugin is just 4.7kb. Nothing to worry about. There's no point in reinventing the wheel, I'd take the well made plugin any day and save the headache. – ejfrancis Mar 03 '14 at 20:45
  • 1
    Btw, if you have addendums to make to an answer, just edit your answer and add it to the bottom `:)`. – halfer Mar 03 '14 at 20:54
  • 1
    Thanks, when you put it like that I guess there isn't much point trying to reinvent the wheel as you say. At 4.7kb it's really not going to make much difference I suppose. I was already in two minds about whether to use it, so you've convinced me! – ESR Mar 03 '14 at 21:04
  • minification is a powerful tool! the original plugin source was 42.4kb, it shrunk down to 1/10 of that. – ejfrancis Mar 03 '14 at 21:13
  • You may have a look at this plugin too: https://github.com/peachananr/onepage-scroll – vcarel Nov 08 '14 at 08:25