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

Question

[Влад]

Набросал на скорую руку по просьбе неких товарищей такой вот 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");
});

Тоже вроде бы всё норм. Где затаился баг и почему только в Яндекс-браузере?

Comments

[xdevelx]

Так закомментируйте в js обработчик scroll и протестируйте. Сразу поймёте, что в нем проблема.
И никакой это не баг, и проявляется не только в яндекс браузере.

У вас в коде есть console.log("Down"); и console.log("Up"); — расскоментируйте их, откройте консоль и посмотрите, что происходит при скроле.

Answer 1

[Сергей delphinpro]

Фигни какой-то понаписали...
Выбросите нафиг весь этот ваш 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;
}

Comments

[Михаил Ливач]

window.addEventListener('scroll', function ()...

Разве не нужно обработчик в debounce обернуть?

[Сергей delphinpro]

Михаил Ливач, Это по желанию. Тут всего лишь смена класса, оно не будет тормозить.
Вот у автора в примере, возможно дебаунсинг и спас бы положение.