Блог

У меня есть рабочая функция bottom в JavaScript для определения, прокручивает ли пользователь нижнюю часть. Однако проблема возникает, когда у пользователя странное разрешение (например, масштаб Windows) или при увеличении. Функция больше не работает и не может определить нижнюю часть.

Вот что я сделал :

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

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

Есть ли способ избежать этого? Даже если вы не увеличиваете масштаб, это не работает для людей, отображающих сайт на телевизоре или что-то в этом роде (как это сделал мой друг)

Спасибо вам

РЕДАКТИРОВАТЬ: я применяю это к точному элементу и повторяю, что мое решение работает, за исключением разархивирования. Unzooming предоставляет значения с плавающей запятой, которые сделали ответ не совсем точным (разница составляет от 1 до 50 пикселей в зависимости от выполненного масштабирования)

Я использую эту функцию (не могу поставить себе в заслугу, поскольку ее написал кто-то другой — извините за отсутствие заслуг — это было давным-давно). Может быть, вы сможете адаптировать это к вашему варианту использования:

 (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) amp;amp; (pageBottom > elementBottom));
            } else {
                return ((elementTop <= pageBottom) amp;amp; (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);