iphone silhouette con immagine a scorrimento all’interno

Sto cercando di creare un overlay per iPhone con un’immagine a scorrimento all’interno per mostrare i design dei siti web per dispositivi mobili, ma l’immagine non scorre con l’iPhone sovrapposto sopra c’è qualcosa che sto facendo male e come posso correggerlo?

DEMO: http://jsfiddle.net/jonathanl5660/Lao36z20/




Puoi strutturare il tuo html in questo modo:

 

E poi con i CSS regola l’aspetto:

 .iphone { width:370px; height:800px; background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center; background-size:100%; } .container { position:relative; top:152px; width:293px; margin:auto; max-height:496px; overflow:auto; } .container img { width:100%; } 

Guarda questa demo Fiddle

Ho biforcato il tuo esempio e l’ho twittato un po ‘. Mantenendo il contenuto interno a larghezza costante possiamo espandere il suo contenitore verticalmente e l’effetto è come se spostassimo solo la barra di scorrimento a destra. Si noti inoltre che è ansible configurare il comportamento di overflow spearately per gli assi xey.

Ecco il link JSFiddle:

http://jsfiddle.net/74yh81s4/2/

e il codice:

 

I migliori saluti