CSS Style window background beyond page on Mac possible?

问题

Is it possible to style or color the window pane background of the browser?
When scrolling beyond the edge in Chrome and Safari on Mac,
the whole page is pulled a bit down and/or sideways.

It shows a basic canvas style of texture,
is it possible to style that region (with CSS) ?

Edit: i found a (crude) way to prevent the overscrolling entirely,
but i'm looking for a way to set a color or texture, to match the overall design.
Prevent "overscrolling" of web page

回答1:

probably this is not needed anymore but maybe someone else wants to do the same :D

this should put a background-color on the overscroll-area of any ios device

body:after {
    content: '';
    position: fixed;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    z-index: -1;
    background: #000000;
}

here is the link to my gist

回答2:

Unfortunately this is not possible. This is part of the application (Safari) and can not be styled with webpages.

回答3:

Set the body colour body {background-color: white} should work.

More complex, if you need to change the overscroll colour, while leaving the body colour white (only tested on iOS10.3 Safari). I did the following using a 1x1 white pixel:

body {
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
    background-size: 100% 100%;
}

FYI 1: three other things I tried that didn't work for me were: outline: 100px solid rgba(0, 0, 0, 0.4);, box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4);, and background: #FFF, rgba(0, 0, 0, 0.4);.

FYI 2: I recall that really old versions of Safari needed the colour set on the html element.

来源：https://stackoverflow.com/questions/22477729/css-style-window-background-beyond-page-on-mac-possible

标签

css

macos

browser