Как остановить фиксированную полосу прокрутки с перекрытием заголовка

Question

В настоящее время у меня проблема с моим фиксированным 100% -ным заголовком ширины, перекрывающим полосу прокрутки. Мне нужен overflow-x: hidden, поскольку у меня есть CSS анимации, которые появляются и вызывают горизонтальные полосы прокрутки.

Вот код 1010 * Fiddle: https://js fiddle.net/kanwu3mc/1/

Любая помощь с благодарностью.

Answer 1

Быстрое решение состоит в том, чтобы добавить к вашему обратному вызову события прокрутки следующее:

header.style.width = `${document.body.scrollWidth}px`;

Однако я бы посоветовал вам рассмотреть возможность реализации в значительной степени CSS решения для таких задач. Попробуйте создать заголовок position: sticky и добавить новый класс цвета бирюзового цвета к элементу при запуске события прокрутки.

Answer 2

Это проблема

html, body{
  ...
  height:100%;
  ...    
}

изменить на

html, body{
    ...
    min-height:100%;
    ...    
}

Неправильно фиксировать высоту html и тело таким образом. В этом случае допускается только минимальная высота.