Создайте конечную точку прокрутки JavaScript

В Интернете доступно так много плагинов для реализации ленивой загрузки на веб-странице. Но они запускают функцию обратного вызова только после прокрутки определенной части страницы. Как насчет того, чтобы мы могли вызвать нашу функцию обратного вызова, когда полоса прокрутки достигла конца страницы. Может быть, такие плагины доступны в Интернете, но я им неизвестен, и мне всегда нравится создавать что-то с нуля. Итак, давайте создадим нашу собственную конечную точку прокрутки.

1. Прежде всего создайте файл HTML (index.html) и файл js (script.js).

2. Теперь вставьте данный CSS в тег «head» файла HTML и свяжите файл js с HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll ending point with JavaScript</title>

    <style>
      *{
        margin: 0;
        padding: 0;
      }

      body{
        height: 200vh;
      }
    </style>
  </head>

  <body>

    <script src="script.js"></script>
  </body>
</html>

const selector = el=>document.querySelector(el);
const body = selector('body');

4. Теперь пришло время создать событие прокрутки. Код события прокрутки приведен ниже:

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y;
  if(scrollLimitLeft===0)console.log('End of the scroll');
});

5. Мы добились того, чего хотели, и наш код до сих пор работает гладко. Но в нашем коде скрывается крошечная ошибка. Наш код перестанет работать, если мы удалим код сброса CSS ( *{margin: 0; padding: 0;} ) из файла HTML. Если вы видите, что значение переменной « scrollLimitLeft» теперь прокручивается внизу страницы, значение будет равно -16 (значение может отличаться в разных браузерах). Может быть, вы, как и я, расстроились, думая, что наш код js будет работать на основе наличия строки кода CSS. Но не волнуйтесь, продолжайте читать, и вы получите решение.

6. Сначала нам нужно узнать, почему это происходит. На самом деле HTML имеет поле по умолчанию в теге «body», и это создает дополнительное пространство для прокрутки. В результате мы получаем отрицательный результат вместо «0» внизу страницы. Поэтому нам нужно вычесть дополнительный запас из « scrollLimitLeft », чтобы наш код снова заработал. Итак, давайте узнаем дополнительную маржу.

7. Напишите данный код после кодов раздела 3

const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

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