Imposta il colore per le parti di pagina aggiuntive visibili durante lo scorrimento dell'elastico

Question

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, ecc

Answer 1

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.

Answer 2

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