Google Chrome mobile не отображает значения CSS, измененные с помощью JavaScript - PullRequest
0 голосов
/ 14 сентября 2018

Я хотел бы иметь фиксированную верхнюю панель навигации, которая плавно скользит вверх при прокрутке вниз и плавно опускается при прокрутке вверх.

Я написал свой код, и он хорошо работает на настольном Chrome, но безобразно работает на мобильном Chrome, а также на настольном Chrome с включенной панелью инструментов dev / device с отзывчивым разрешением (когда полоса прокрутки меняется на мобильный).

Под безобразием я подразумеваю, что верхнее значение navbar css не обновляется гладко. Похоже, что браузер не отображает изменения в режиме реального времени. Каждый прокручиваемый пиксель должен быть добавлен или удален из верхней позиции панели навигации, но на мобильном телефоне это выглядит так.

Мой код плох? Есть ли обходной путь? Или это мобильная ошибка Google Chrome?

const navbarDOM = document.querySelector('nav');
let config = {
  lastPageYOffsetPx: 0,
  scrolledPx: 0,
  navbarStyleTopPx: 0,
}

fixedNavbar();
window.addEventListener('scroll', () => fixedNavbar());

function fixedNavbar() {
  document.body.style.paddingTop = navbarDOM.clientHeight + 'px';
  config.scrolledPx = window.pageYOffset - config.lastPageYOffsetPx;
  config.navbarStyleTopPx = parseInt(window.getComputedStyle(navbarDOM).top) - config.scrolledPx;

  if (config.navbarStyleTopPx > 0) {
    config.navbarStyleTopPx = 0;
  } else if (config.navbarStyleTopPx < -navbarDOM.clientHeight) {
    config.navbarStyleTopPx = -navbarDOM.clientHeight;
  }

  navbarDOM.style.top = config.navbarStyleTopPx + 'px';
  config.lastPageYOffsetPx = window.pageYOffset;
}
body {
  height: 300vh;
  background: rgb(83,83,83);
  background: linear-gradient(0deg, rgba(83,83,83,1) 0%, rgba(255,255,255,1) 100%);
}

nav {
  height: 25vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgb(63,94,251);
  background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
}
<nav></nav>

Оформить заказ на кодовый проект. С текстом на заднем плане эта проблема более отчетливо видна. https://codepen.io/anon/pen/gdKNBL

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...