Kolor tła i gumy-band przewijanie w Mobile Safari

buduję strony internetowej w Mobile Safari ze stałą nagłówka/stopki i kauczuk-band przewijanie w głównej treści:Kolor tła i gumy-band przewijanie w Mobile Safari

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>

Jak mogę zmienić kolor tła obszaru widocznego podczas przewijania gumki?

Chciałbym wykorzystać te same kolory nagłówka/stopki, tak że kiedy przewijać w górę:

header

i kiedy przewinąć w dół:

footer

I wiedzieć, że można zmienić cały kolor przewijanych obszarów, ustawiając kolor tła w ciele:

.body { 
    background-color: rebeccapurple; 
}

więc próbowałem użyć gradient:

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

ale to nie działa.

Źródło

2016-04-28 Paul

Przewijanie jest zdarzeniem, dlatego CSS nie może zmienić tła podczas przewijania. Można to jednak zrobić za pomocą interfejsu JQuery [.load()] (http://api.jquery.com/scroll/) API –

@MichaelSchwartz. Z przyjemnością używam JavaScript, jeśli jest to jedyny sposób na rozwiązanie tego problemu. Chociaż wolałbym nie używać jQuery. – Paul

Używam teraz mojego telefonu w autobusie, więc nie mogę w tej chwili pomóc. [tutaj jest] (http://kodeweave.sourceforge.net/editor/#42bd3465730905bf15f71b6d1bf9101b) splot, który wyśmiewałem, aby pokazać, jak radzić sobie z stylizacją za pomocą JQuery [.load()] (http://api.jquery.com/ przewiń /) –

Jednym ze sposobów osiągnięcia tego jest dodanie stałych elementów za treścią, jeden element na górze i jeden na dole z tymi samymi kolorami tła, co nagłówek/stopka.

#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>

Być może trzeba będzie zagrać za pomocą indeksu z, aby znaleźć się za nagłówkiem/stopką.

Źródło

2017-09-15 15:13:03

Kolor tła i gumy-band przewijanie w Mobile Safari

Odpowiedz

Powiązane problemy