Vextor-ltd
@Vextor-ltd
Webdeveloper

Почему при скролле Yandex-браузер тупит?

Набросал на скорую руку по просьбе неких товарищей такой вот pet-проектик https://brp-service.vextor.ru
При скроллинге вниз – всё нормально.
При скроллинге наверх именоо в Yande-баузере, если мышка находится внизу экрана, почему-то возникают жуткие тормоза, как будто-то там сверху экранов 50.

Я подумал, что возможно это из-за:
html {
  ...
  scroll-behavior: smooth;
  overflow: auto;
}


Отключил эти свойства, но баг не пропал.
Просмотрел уже всё в инструментах разработчика вроде всё норм.
Далее смотрю JS:
const topbar = document.querySelector(".topbar");
const topbarTop = document.querySelector(".topbar__top");
const topbarBottom = document.querySelector(".topbar__bottom");
const nav = document.querySelector(".topbar__bottom-rights");
const consult = document.querySelector(".topbar__bottom-consult");
const lgMediaQuery = window.matchMedia("(min-width: 992px)");

const menuBtn = document.querySelector(".topbar__hamburger-wrapper");
const menuHamburger = document.querySelector(".topbar__hamburger");

let lastScrollTop = 0;
window.addEventListener(
  "scroll",
  function () {
    const currentScrollTop =
      window.pageYOffset || document.documentElement.scrollTop;

    if (currentScrollTop > lastScrollTop) {
      // console.log("Down");
      topbarTop.style.display = "none";
      topbarBottom.style.top = "0";      
      
      if (lgMediaQuery.matches === true) {
        nav.style.opacity = "0";

        setTimeout(() => {
          consult.style.opacity = "1";
          consult.style.zIndex = "1";
        }, 150);
      }
    } else if (currentScrollTop < lastScrollTop) {
      // console.log("Up");
      topbarTop.style.display = "block";
      if (currentScrollTop === 0) {
        setTimeout(() => {
          topbarBottom.style.top = `${topbarTop.offsetHeight}px`; // поднимаем на высоту верхнего блока
        }, 150);
        if (lgMediaQuery.matches === true) {
          setTimeout(() => {
            consult.style.opacity = "0";
            consult.style.zIndex = "-1";

            setTimeout(() => {
              nav.style.opacity = "1";
            }, 150);
          }, 150);
        }
      }
    }
    lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
  },
  false
);

// de\activate the menu
menuBtn.addEventListener("click", (e) => {
  e.preventDefault();
  menuBtn.classList.toggle("topbar__hamburger-wrapper--activate");
  menuHamburger.classList.toggle("animate");
  nav.classList.toggle("topbar__bottom-rights--active");
  document.body.classList.toggle("no-scroll");
  document.querySelector("html").classList.toggle("no-scroll");
});


Тоже вроде бы всё норм. Где затаился баг и почему только в Яндекс-браузере?
  • Вопрос задан
  • 178 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Фигни какой-то понаписали...
Выбросите нафиг весь этот ваш javascript.
Оставьте только

window.addEventListener('scroll', function () {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  document.body.classList.toggle('scrolled', currentScrollTop > 0)
});

Далее показывание и скрытие элементов сделайте в css, отталкиваясь от класса body.scrolled
.topbar__bottom-consult {
  opacity: 0;
  transition: 0.3s ease;
}
body.scrolled .topbar__bottom-consult {
  opacity: 1;
}

Фиксирование наверху через position:sticky
.topbar__bottom {
  position: sticky;
  top: 0;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
19 июн. 2024, в 06:58
15000 руб./за проект
19 июн. 2024, в 01:11
7000 руб./за проект
18 июн. 2024, в 23:10
15000 руб./за проект