colore di sfondo e gomma-band lo scorrimento in Safari Mobile

Sto costruendo una pagina web in Safari Mobile con un colpo di testa/piè di pagina fisso e gomma-band scorrimento nel contenuto principale:colore di sfondo e gomma-band lo scorrimento in Safari Mobile

html, 
 
body { 
 
    margin: 0 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
.header, 
 
.footer { 
 
    height: 50px; 
 
    position: fixed; 
 
    z-index: 100; 
 
    width: 100%; 
 
} 
 
.header { 
 
    top: 0; 
 
    background-color: #44677F; 
 
} 
 
.footer { 
 
    bottom: 0; 
 
    background-color: #4E3AFF; 
 
} 
 
.container { 
 
    height: 100%; 
 
    overflow: auto; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 
.content { 
 
    background-size: 50px 50px; 
 
    background-color: #D0FCFF; 
 
    background-image: linear-gradient(#9DC9FF 50%, transparent 50%, transparent); 
 
    height: 2000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <header class="header"></header> 
 
    <div class="container"> 
 
    <div class="content"></div> 
 
    </div> 
 
    <footer class="footer"></footer> 
 
</body> 
 

 
</html>

Come posso cambiare il colore di sfondo dell'area visibile durante lo scorrimento della banda elastica?

vorrei usare gli stessi colori dell'intestazione/piè di pagina, in modo che quando ho scorrere verso l'alto:

header

e quando ho scorrere verso il basso:

footer

I sapere che è possibile cambiare l'intero colore delle aree di scorrimento impostando un colore di sfondo nel corpo:

.body { 
    background-color: rebeccapurple; 
}

così ho cercato di usare una sfumatura:

.body { 
    background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%); 
}

ma non ha funzionato.

fonte

2016-04-28 Paul

Lo scorrimento è un evento, pertanto il CSS non può modificare uno sfondo durante lo scorrimento. Tuttavia, puoi farlo utilizzando l'API [.load()] (http://api.jquery.com/scroll/) di JQuery. –

@MichaelSchwartz Sono felice di utilizzare JavaScript se questo è l'unico modo per risolvere questo problema. Anche se preferirei non usare jQuery. – Paul

Al momento sto utilizzando il mio telefono sull'autobus, quindi al momento non posso essere di grande aiuto. [here's] (http://kodeweave.sourceforge.net/editor/#42bd3465730905bf15f71b6d1bf9101b) una trama che ho preso in giro per mostrarti come gestire lo stile usando [.load()] di JQuery (http://api.jquery.com/ scorri /) –

Un modo per ottenere questo risultato è aggiungere elementi fissi dietro il contenuto, un elemento per la parte superiore e uno per la parte inferiore con gli stessi colori di sfondo dell'intestazione/piè di pagina.

#headerBackground { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    height: 50%; 
    background-color: #{headerColor} 
} 
#footerBackground { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    bottom: 0; 
    height: 50%; 
    background-color: #{footerColor} 
} 
<body> 
    <div id="footerBackground "></div> 
    <div id="headerBackground "></div> 
    <header class="header"></header> 
    <div class="container"> 
    <div class="content"></div> 
    </div> 
    <footer class="footer"></footer> 
</body>

Potrebbe essere necessario giocare con z-index per ottenere qualcosa dietro l'intestazione/piè di pagina.

fonte

2017-09-15 15:13:03

colore di sfondo e gomma-band lo scorrimento in Safari Mobile

risposta

Problemi correlati