CODEWITHSUNDEEP
javascriptangularjs
user3291914
user3291914

Reputation: 39

How to trigger an event scroll reaching to specific div in page

I have a page it contains different sections. When user open this page i am getting all the data at a time and displying it in UI. It is taking time to get all sections data and displaying it in UI.

To aviod this slowness issue. I want to change my page execution.

To do this, First I want to load few mandatory sections data after user scroll down to the particular non mandatory sections (div) I want to load the data for that sections.

To implement this I am facing issue with identifying div(Non mandatory section) position when user scrolls.

Can anyone suggest me how to identify user scrolls reaching to my div.

Upvotes: 1

Views: 375

Answers (2)

Java4you
Java4you

Reputation: 656

angular.element($window).bind("scroll", function()

This method call every time when you scroll the current page.

angular.element(document.querySelector('.testing'));

The above code can fetch the div which you want to identify.

if(element[0] && (windowElement[0].pageYOffset >= element[0].offsetTop))

The condition will verify scroll is reached to your specified div.

angular.element($window).bind("scroll", function() {
        var windowElement = angular.element($window);       
        var element = angular.element(document.querySelector('.testing'));
        if(element[0] && (windowElement[0].pageYOffset >= element[0].offsetTop)){
            $scope.yourFunction();  
        }
    });

Upvotes: 2

Shenoy D'Souza
Shenoy D'Souza

Reputation: 84

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 50) {

        $scope.yourFunction();
    }
});

Upvotes: -1

Related Questions