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
Post a Comment