Detect when elements within a scrollable div are out of view

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 .

Here's a pure javascript version of the accepted answer without relying on jQuery and with some fixes to the partial in view detection and support for out of view on top.

function checkInView(container, element, partial) {    //Get container properties    let cTop = container.scrollTop;    let cBottom = cTop + container.clientHeight;    //Get element properties    let eTop = element.offsetTop;    let eBottom = eTop + element.clientHeight;    //Check if in view        let isTotal = (eTop >= cTop && eBottom <= cBottom);    let isPartial = partial && (      (eTop < cTop && eBottom > cTop) ||      (eBottom > cBottom && eTop < cBottom)    );    //Return outcome    return  (isTotal  || isPartial);}

And as a bonus, this function ensures the element is in view if it's not (partial or full):

function ensureInView(container, element) {    //Determine container top and bottom    let cTop = container.scrollTop;    let cBottom = cTop + container.clientHeight;    //Determine element top and bottom    let eTop = element.offsetTop;    let eBottom = eTop + element.clientHeight;    //Check if out of view    if (eTop < cTop) {      container.scrollTop -= (cTop - eTop);    }    else if (eBottom > cBottom) {      container.scrollTop += (eBottom - cBottom);    }}

Based of the best answer. Instead of just telling you if an element is partially visible or not. I added a little extra so you can pass in a percentage (0-100) that tells you if the element is more than x% visible.

function (container, element, partial) {    var cTop = container.scrollTop;    var cBottom = cTop + container.clientHeight;    var eTop = element.offsetTop;    var eBottom = eTop + element.clientHeight;    var isTotal = (eTop >= cTop && eBottom <= cBottom);    var isPartial;    if (partial === true) {        isPartial = (eTop < cTop && eBottom > cTop) || (eBottom > cBottom && eTop < cBottom);    } else if(typeof partial === "number"){        if (eTop < cTop && eBottom > cTop) {            isPartial = ((eBottom - cTop) * 100) / element.clientHeight > partial;        } else if (eBottom > cBottom && eTop < cBottom){             isPartial = ((cBottom - eTop) * 100) / element.clientHeight > partial;        }    }    return (isTotal || isPartial);}