CODEWITHSUNDEEP
javascriptangularjs
Nemanja Grabovac
Nemanja Grabovac

Reputation: 878

Calculate offset top of elements inside of a scrollable div

How can I calculate offset top inside a scrollable div? I have two divs that I want scroll inside my content div, and I want to set 2 variables to true/false, depending on where they are positioned inside that content div.

I tried something like this but I guess it calculates the entire page offset, it doesn't really work. I bind scroll to that content div, and I want to calculate their positon:

angular.element(slideContent).bind("scroll", function () {
        var contentScrollTop = angular.element(slideContent).scrollTop();
        var slideOneOffset = slideOne.offset().top;
        var slideTwoOffset = slideTwo.offset().top;

        var firstSlideDistance = (contentScrollTop - slideOneOffset);
        var secondSlideDistance = (contentScrollTop - slideTwoOffset);
    });

Upvotes: 1

Views: 6105

Answers (1)

Quinn Keaveney
Quinn Keaveney

Reputation: 1574

I think this should get you most of the way there:

// Position of first element relative to container top
var scrollTop = $(".container .element").offset().top - $(".container").offset().top;

// Position of selected element relative to container top
var targetTop = $(".container > *").offset().top - $(".container").offset().top;

// The offset of a scrollable container
var scrollOffset = scrollTop - targetTop;

// Scroll untill target element is at the top of its container
$(".container").scrollTop(scrollOffset);

———————————

EDIT (May 31 2018)

I guess this is better:

var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop

Upvotes: 5

Related Questions