Scroll bottom in JavaScript

Question

I have a working bottom function in JavaScript to detect if the user scrolls at the bottom. However, a problem comes when the user has a strange resolution (like windows scale) or when you zoom. The function is not working anymore and can't detect the bottom.

Here is what I did :

    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;

    if (bottom) {
        this.props.getNewValues();
    }

Is there a way to avoid that? Even when you don't zoom, this is not working for people displaying the site on a TV or something like this (like a friend of mine did)

Thanks you

EDIT : I'm applying this on a precise element and I repeat that my solution is working except by unzooming. Unzooming provides float values that made the response not really accurate (it goes from 1 to 50px of difference based on the zoom made)

@AbdulBasit thanks for this this what I'm looking for but since I'm doing that on a precise element and not on the whole window I don't know how to apply that — Zeyukan Ich'
– Zeyukan Ich', Commented Mar 21, 2019 at 13:00
@wuarmin I disagree on the dupe-flag you have raised since the op in your reference explicitly asks for a jquery solution and doesn't go into additional scenarios (such as zoom or window-resize) .. — iLuvLogix
– iLuvLogix, Commented Mar 21, 2019 at 13:00

Jason Is My Name · Accepted Answer · 2019-03-21 13:01:55Z

1

I use this function (can't take credit as someone else wrote it - sorry for no credit - it was ages ago). Maybe you can adapt this to your use case:

(function($) {

    //CHECK SCROLLED INTO VIEW UTIL
    function Utils() {

    }

    Utils.prototype = {
        constructor: Utils,
        isElementInView: function (element, fullyInView) {
            var pageTop = $(window).scrollTop();
            var pageBottom = pageTop + $(window).height();
            var elementTop = $(element).offset().top;
            var elementBottom = elementTop + $(element).height();

            if (fullyInView === true) {
                return ((pageTop < elementTop) && (pageBottom > elementBottom));
            } else {
                return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
            }
        }
    };

    var Utils = new Utils();
    //END CHECK SCROLLED INTO VIEW UTIL

    //USING THE ELEMENT IN VIEW UTIL
    //this function tells what to do do when the element is or isnt in view.
    //var inView = Utils.isElementInView(el, false); Where FALSE means the element doesnt need to be completely in view / TRUE would mean the element needs to be completely in view
    function IsEInView(el) {

        var inView = Utils.isElementInView(el, false);

        if(inView) {

            //console.log('in view');

        } else {
            //console.log('not in view');
        }

    };

    //Check to make sure the element you want to be sure is visible is present on the page
    var variableOfYourElement = $('#variableOfYourElement');

    //if it is on this page run the function that checks to see if it is partially or fully in view
    if( variableOfYourElement.length ) {

        //run function on page load
        IsEInView(variableOfYourElement);

        //run function if the element scrolls into view
        $(window).scroll(function(){

            IsEInView(variableOfYourElement);

        });

    }
    //END USING THE ELEMENT IN VIEW UTIL

})(jQuery);

answered Mar 21, 2019 at 13:01

Jason Is My Name

9393 gold badges18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason Is My Name Over a year ago

If you're able to utilise this script for your use case please accept my answer as correct.

Zeyukan Ich' Over a year ago

It doesn't seem to fit my use case unfortunately

Jason Is My Name Over a year ago

If you're attempting to do something while an element is or isn't in view. This is going to be the correct answer. Can you add more information into your use case so we can help apply it?

Zeyukan Ich' Over a year ago

I'm also using React btw

Collectives™ on Stack Overflow

Scroll bottom in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related