javascript - Using jQuery to snap to div on scroll -



javascript - Using jQuery to snap to div on scroll -

i have built simple vertical scrollable website snaps view divs when user scrolls or downwards page. cans see demo here: http://dev.driz.co.uk/snap.html

the js simple:

var currentscreen = 0; var scrollready = false; var screens = new array( 'one', 'two', 'three'); function scrollnext() { if( currentscreen < screens.length-1 && scrollready == true ) { currentscreen++; performscroll(); } } function scrollprev() { if( currentscreen > 0 && scrollready == true ) { currentscreen--; performscroll(); } } function performscroll() { scrollready = false; var newypos = math.ceil($('#'+screens[currentscreen]).offset().top); $('.snap').animate({scrolltop: newypos }, 500, function() { scrollready = true; }); } $(document).ready(function() { scrollready = true; $('.snap').bind('mousewheel', function (event, as, aq, deltay) { event.preventdefault(); if (deltay > 0) { scrollprev(); } else { if (deltay < 0) { scrollnext(); } } homecoming false; }); $(document).bind('keyup', function (event) { if (event.keycode == 40 || event.keycode == 38) { event.preventdefault(); if (event.keycode == 40) { if (scrollready == true) { scrollnext(); } } else { if (event.keycode == 38) { if (scrollready == true) { scrollprev(); } } } } }); $(document).bind('keydown', function (event) { if (event.keycode == 40 || event.keycode == 38 ) { event.preventdefault(); } }); });

however can scroll first 2 divs , can't 3rd one... ideas why happening? can't see issues cause wouldn't effect first 2 working...

update: can scroll 3rd div (scrolling , downwards until does), skips sec div , when user scrolls again, jumps way top... weird happening.

update 2: i've noticed currentscreen incorrectly 2 when scroll sec div why can't scroll 3rd div. ideas why though?

update 3: seems scrollready variable isn't preventing functions beingness called multiple times in places, if scroll , downwards few times, find sections scrolled passed multiple times. shouldn't happen, should able scroll 1 , downwards 1 @ time.

store values of section offsets in variable , try, work.

check on codepen.

http://codepen.io/sandeshdamkondwar/pen/vegko?editors=100

javascript jquery css

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -