Arhn - архитектура программирования

Глючит функция плавной прокрутки при использовании большого параметра

Я написал функцию, которая будет плавно прокручивать экран до точки dest пикселя. Проблема заключается в том, что всякий раз, когда выбирается пункт назначения прокрутки (dest), превышающий общую высоту <body>, прокрутка никогда не останавливается, даже при достижении конца <body> (попробуйте прокрутить вверх после того, как прокрутка «остановится»).

function scroll(dest) {
  var x, scrollDist;
  if(dest > document.body.offsetHeight) {
    dest = document.body.offsetHeight;
  }
  console.log(document.body.offsetHeight);
  console.log(dest);
  x = setInterval(function() {
    // Calculate the scroll distance
    scrollDist = dest - window.scrollY;
    // Log the scroll distance at each iteration
    console.log(scrollDist);

    // If the scroll distance is greater than 10, scroll down 10px, otherwise
    // scroll down by an amount equal to scrollDist then stop scrolling
    if(Math.abs(scrollDist) >= 10) {
      // If the scroll distance is positive scroll down, otherwise scroll up
      if(scrollDist > 0) {
        window.scrollBy(0,2);
      } else {
        window.scrollBy(0,-2);
      }
    } else {
      window.scrollBy(0,scrollDist);
      clearInterval(x);
    }
  },1);
}
scroll(10000);

Попробуйте это на этой веб-странице или любой другой веб-странице с высотой тела менее 10000 пикселей. Заглянув в консоль, вы можете заметить, что после достижения конца тела scrollDist продолжает регистрироваться как 410, что является самой странной частью. Но почему? Я не вижу ничего плохого в алгоритме.

13.02.2019

  • При копировании с этой страницы и вставке в консоль ваш код фактически печатал 341 в консоль снова и снова. Кажется совершенно очевидным, что проблема заключается в том, как вычисляется scrollDist. Если запрошенный адрес назначения слишком велик, вы изменяете его на offsetHeight документа - очевидно, это неправильное значение для использования..... 13.02.2019
  • Если это неправильное значение (я не могу понять, почему), то какое правильное? 13.02.2019

Ответы:


1

Вычесть высоту страницы из переменной dest

В вашем коде код вычисляет позицию для прокрутки с помощью window.scrollY, которая является высотой, на которой находится верхняя часть окна. Это означает, что если вы попробуете его со значением, превышающим высоту страницы, он попытается достичь 0 расстояния прокрутки от нижней части страницы, но не учитывает высоту окна. Значение, которое он не может прокручивать, которое в вашем случае составляет 410 пикселей, является высотой окна.

Вы можете исправить свой код, вычитая window.innerHeight из высоты смещения тела, если расстояние прокрутки слишком велико.

Рассматриваемый блок должен быть изменен с этого:

if (dest > document.body.offsetHeight) {  
  dest = document.body.offsetHeight;  
}

К этому:

if (dest > document.body.offsetHeight) {  
  dest = document.body.offsetHeight - window.innerHeight;  
}
13.02.2019
Новые материалы

Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..