Almeno quando si scorre oltre il bordo su mac, si vede la pagina che si sposta verso il basso lasciando un colore normale dietro di esso. Ho capito che puoi cambiare il colore impostando il colore di sfondo dello body
. Ma c'è qualche altro approccio ad esso? Perché a volte ho bisogno di un diverso colore in alto e in basso, eccImposta il colore per le parti di pagina aggiuntive visibili durante lo scorrimento dell'elastico
risposta
La mia soluzione è stata quella di imbrogliare un po 'e utilizzare un linear-gradient()
sul tag html
o body
per controllare i colori di sfondo segmentati per un determinato progetto.
Qualcosa di simile dovrebbe dividere lo sfondo a metà e occuparsi dei browser moderni.
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, #8BC63E),
color-stop(0.5, #EEEEEE)
);
background: -o-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -moz-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -webkit-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -ms-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: linear-gradient(to bottom, #8BC63E 50%, #EEEEEE 50%);
Ho avuto fortuna mista ottenere lo stesso comportamento su iOS, e sembra essere più dipendente dal layout specifico.
Ho bisogno di raggiungere qualcosa di simile.
La soluzione inviata da @tksb non funziona per me su Chrome (OS X), sembra che Chrome utilizzi lo background-color
per definire lo sfondo elastico e ignora lo background-image
.
La soluzione che ho trovato è quello di utilizzare un po 'di JS
// create a self calling function to encapsulate our code
(function(document, window) {
// define some variables with initial values
var scrollTop = 0;
var resetTimer = null;
// this function gets called when you want to
//reset the scrollTop to 0
function resetScrollTop() {
scrollTop = 0;
}
// add an event listener to `body` on mousewheel event (scroll)
document.body.addEventListener('mousewheel', function(evt) {
// on each even detection, clear any previous set timer
// to avoid double actions
window.clearTimeout(resetTimer);
// get the event values
var delta = evt.wheelDelta;
var deltaX = evt.deltaX;
// add the amount of vertical pixels scrolled
// to our `scrollTop` variable
scrollTop += deltaX;
console.log(scrollTop);
// if user is scrolling down we remove the `scroll-up` class
if (delta < 0 && scrollTop <= 0) {
document.body.classList.remove('scroll-up');
}
// otherwise, we add it
else if (delta > 0 && scrollTop > 0) {
document.body.classList.add('scroll-up');
}
// if no wheel action is detected in 100ms,
// we reset our `scrollTop` variable
window.setTimeout(resetScrollTop, 100);
});
})(document, window);
body {
margin: 0;
}
body.scroll-up {
background-color: #009688;
}
section {
min-height: 100vh;
background-color: #fff;
}
header {
height: 100px;
background-color: #009688;
color: #fff;
}
<section id="section">
<header>
this demo works only on full-screen preview
</header>
</section>
Ecco una schermata demo completo per testarlo: http://s.codepen.io/FezVrasta/debug/XXxbMa
Potresti pubblicare una versione jquery per una migliore leggibilità? – harryparkdotio
jQuery non sembra una necessità qui, semplice buon vecchio JS è abbastanza chiaro IMHO –
Lo trovo difficile da leggere, un po 'complicato e troppo ingegnerizzato – harryparkdotio
- 1. pagina Prevenire scorrimento durante lo scorrimento di un elemento div
- 2. Il colore elenco diventa nero durante lo scorrimento
- 3. Il contenuto GridView scompare durante lo scorrimento
- 4. Div sempre visibile durante lo scorrimento
- 5. scrollTo durante lo scorrimento
- 6. Nascondere e mostrare div durante lo scorrimento pagina su iphone
- 7. Imposta posizione di scorrimento
- 8. UINavigationBar che cambia trasparenza durante lo scorrimento
- 9. Imposta il numero massimo di righe visibili per listview
- 10. Nascondere le schede di ViewPager durante lo scorrimento verso l'alto.
- 11. Come rendere le barre di scorrimento di listview sempre visibili
- 12. jQuery ui datapicker problema di posizionamento durante lo scorrimento verso il basso della pagina web
- 13. Scorrimento iPad - quali eventi si attivano durante lo scorrimento?
- 14. Strana webview lampeggiante nero durante lo scorrimento
- 15. Nascondi barra di stato durante lo scorrimento
- 16. UITextField imposta il colore del bordo usando lo storyboard
- 17. Il piè di pagina della sezione UITableView si sovrappone durante lo scorrimento
- 18. Il tipo di accessorio UITableview scompare durante lo scorrimento
- 19. intestazione bootstrap fissa durante lo scorrimento verso il basso
- 20. L'elemento di navigazione appiccicoso salta durante lo scorrimento
- 21. disabilitare completamente lo scorrimento della pagina web
- 22. Posizione di correzione: elemento assoluto in un overflow: elemento di scorrimento durante lo scorrimento
- 23. Colore diverso per le diverse parti del titolo MATLAB
- 24. UITableView si blocca durante lo scorrimento
- 25. Disabilita tutto lo scorrimento sulla pagina web
- 26. Aggiorna dom durante lo scorrimento nell'app per PhoneGap
- 27. UIScrollView snap-to-position durante lo scorrimento
- 28. È possibile eseguire un effetto "snap-in" durante lo scorrimento?
- 29. JavaScript getBoundingClientRect() cambia durante lo scorrimento
- 30. ios8 UITableView scolling indietro durante lo scorrimento
io non sto vedendo questo lavoro sugli elementi body o html in Chrome 64. – jtheletter