Цвет фона страницы прокрутки – Tempertemper
Перейти к основному содержанию
Опубликовано 24 января 2021 г. в CSS
В Safari и Chrome (а также в любом браузере на основе Chromium, таком как Edge и Opera) есть замечательная функция: если вы прокручиваете страницу вверх или вниз и нажимаете вверх или вниз, происходит удовлетворительный скачок, а не резкая остановка.
Отскок показывает белый фон за холстом главной страницы, но это немного скучно, так что давайте посмотрим, как добавить нашу собственную красочную завитушку к прокрутке наших посетителей.
Я хотел бы сказать вам, что это было так просто:
html {
background-color: blue;
} тело {
цвет фона: белый;
}
На самом деле, работа с ним в CSS без дополнительного HTML хорошо работает в браузерах на основе Chromium, но вам понадобится тот же эффект в Safari, чтобы каждый, кто использует iOS, мог наслаждаться вашим синим 
Фон
В Safari (в macOS и iOS), если элемент имеет значение background-color , это то, что видно при отражении, поэтому в приведенном выше примере background-color из одновременно является холстом и его фоном. Синий фон игнорируется. Раздражающий.
Итак, нам нужен отдельный элемент холста, который находится поверх и :
< /body>
И CSS будет выглядеть так:
html {
background-color: blue;
} .canvas {
цвет фона: белый;
}
Теперь, с небольшим дополнительным HTML, любой, кто использует Chrome или Safari, увидит белую страницу со скрытым синим фоном, который выглядывает, когда они прокручивают страницу вверх или вниз.