Цвет фона при прокрутке выше/ниже области просмотра?

В браузерах на Mac можно прокручивать вверх за верхнюю часть и вниз под нижнюю часть элемента body. В каждом случае содержимое отщелкивается назад, но на мгновение (из-за импульса вашей прокрутки) вы можете увидеть немного цвета фона тела над/под самым верхним/нижним содержимым страницы. .

Цвет этого элемента задается значением цвета фона тела в Chrome/Safari/FF.

Можно ли установить разные цвета выше и ниже окна просмотра? Например, белый вверху и черный внизу.

Я почти уверен, что это просто вне нашего контроля — поскольку технически эта область находится за пределами области просмотра — но я хотел бы услышать, может ли кто-нибудь пролить свет на меня.


css momentum
person Dominic    schedule 07.11.2015    source источник
comment
Мне тоже был бы интересен ответ на этот вопрос, никогда раньше об этом не задумывался.   -  person Luke Joshua Park    schedule 08.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вроде, как бы, что-то вроде. Вы можете использовать градиентный фон. Технически это все еще один фон, но разные его части будут видны вверху и внизу.

Рендеринг фонового градиента будет неожиданным из-за путаницы между фонами <body> и <html>, которые браузеры сохраняют для обратной совместимости. Вам нужно присвоить элементу <html> значение height или min-height, иначе фоновый градиент будет использовать высоту <body>!

html {
    background: linear-gradient(red, blue); // use color stops for hard edge
    min-height: 100%;
}

И если вы хотите покрыть его другим цветом фона для содержимого страницы, ожидайте борьбы с height:auto и раздражающими крахами:

html {
    background: linear-gradient(red, blue);
    height: 100%;
}

body {
    background: green;
    height: 100%;
    margin: 0; padding: 1em;
}
person Kornel    schedule 19.02.2018