Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
97
rated 0 times [  103] [ 6]  / answers: 1 / hits: 36618  / 11 Years ago, tue, april 30, 2013, 12:00:00

I need to find a good solution to the following problem. I see a lot of people asking about tracking if an element is in or outside of view Port for the page or browser window. I need to be able to replicate this action, but inside a DIV that scrolls, with overflow:scroll for example. Does anyone know of a good example, for this specific action?



Thanks in advance.


More From » jquery

 Answers
21

i had the same problem before, i have ended up with the following function.the first parameter is for the element to check, the second is to check if the element is partially in-view.it is for vertical check only, you can extend it to check for horizontal scroll.



function checkInView(elem,partial)
{
var container = $(.scrollable);
var contHeight = container.height();
var contTop = container.scrollTop();
var contBottom = contTop + contHeight ;

var elemTop = $(elem).offset().top - container.offset().top;
var elemBottom = elemTop + $(elem).height();

var isTotal = (elemTop >= 0 && elemBottom <=contHeight);
var isPart = ((elemTop < 0 && elemBottom > 0 ) || (elemTop > 0 && elemTop <= container.height())) && partial ;

return isTotal || isPart ;
}


check it on jsFiddle .


[#78501] Monday, April 29, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
eanskylerg

Total Points: 524
Total Questions: 107
Total Answers: 100

Location: Colombia
Member since Mon, May 2, 2022
2 Years ago
;