javascript - How to calculate the lower limit of a div and scroll to the next div? -
i'm trying scroll next div when current div came lower limit.
i'm using jquery plugin mousewheel. following code have, run animation scrolltop when scroll. not when reaches desired point lower limit. because, div contain lot of text images.
this structure html
<html> [...] <body> <div id="main"> <div class="item"> [only image] <!-- img? i'm 2px distance next div ok, scrolltop when scroll1 --> </div> <div class="item"> [some text] <!-- mmmm text. ok, let read this.. scroll 1.. scroll 2.. scroll 3.. wait! i'm 40px distance next div ... scrolltop --> </div> <div class="item"> [some text image] <!-- mmmm text image. ok, let read this.. scroll 1.. scroll 2.. scroll 3.. scroll 4... scroll 5.. scroll 6.. wait! i'm 40px distance next div ... scrolltop --> </div> <div class="item"> [....] </div> </div> </body> </html>
this js:
$('#main').on('mousewheel', '.item', function(e) { if (e.deltay < 0) { $('html, body').animate({ scrolltop: $(e.currenttarget).next().offset().top }, 1000); } else { $('html, body').animate({ scrolltop: $(e.currenttarget).prev().offset().top }, 1000); } e.preventdefault(); });
add hight of element offset
$('#main').on('mousewheel', '.item', function(e) { if ($(document).scrolltop() >= $(e.currenttarget).offset().top+$(e.currenttarget).height();) { $('html, body').animate({ scrolltop: $(e.currenttarget).next().offset().top; }, 1000); } e.preventdefault(); });