2013-08-22 12 views
7

ho questo esempio:div scorrevole non è scorrevole in cui si libra sopra un'immagine

<div class="container"> 
    <div class="box"> 
     <object class="object" data="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg"> 
     <img class="image" src="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg"> 
    </object> 
    </div> 
</div> 


.container { 
width: 200px; 
height: 500px; 
overflow: scroll; 
background: red; 
} 

.box { 
top: 20px; 
left: 20px; 
width: 50px; 
height: 1000px; 
position: relative;  
} 

.object { 
position: absolute; 
} 

.image { 
top: 50px; 
position: absolute; 
cursor: pointer; 
} 
} 

http://jsfiddle.net/aS972/1/

Passa sopra l'immagine, e non sarà in grado di scorrere, librarsi al di fuori dell'immagine, e puoi scorrere. Devo essere in grado di scorrere anche quando si passa sopra l'immagine.

Cosa sto sbagliando?

+4

Perché stai usando un elemento '' ? – Mooseman

+2

Inoltre, chiudi il tuo tag '', questo però non risolve il problema ma aggiunge un '/' alla fine. '' – Tikkes

+0

Ho bisogno di usare l'elemento . @Mooseman –

risposta

0

Modifica 2 Ho rimosso il object in questo violino. Non è servito nell'esempio, http://jsfiddle.net/aS972/6/. Tuttavia, se devi lasciarlo, usa questo nel blocco oggetto come già detto da qualcun altro.

<param name="wmode" value="transparent"> 

Modifica

Ok, il problema è che il contenuto non ha nemmeno superi 500px quindi non si può sapere se è scorrevole o no. Se aggiungi altri contenuti come questo http://jsfiddle.net/aS972/5/, funziona correttamente. Impostando height su auto, la casella .container si espandeva alla dimensione di .box, rendendola quindi scorrevole perché era così alta.

Cambia il tuo css contenitore per avere 'altezza' come 'auto'. L'impostazione dell'altezza ".box" tanto più grande sembrava rovinarla.

.container { 
width: 200px; 
height: auto; //this changes to auto 
overflow: scroll; 
background: red; 
position: relative; //add relative for good measure. 
} 
+0

Il contenitore dovrebbe essere scorrevole. –

+0

Ho fatto +1 su questa risposta perché ho visto che risolve la domanda. Ma puoi spiegarci questa meraviglia? Cosa è appena successo qui? – ygesher

+0

Ho aggiornato la risposta per tutti –

1

Un sacco di volte con video flash che si devono aggiungere un <param name="wmode" value="transparent" /> all'interno del tag <object> per arrivare html per rendere più di esso e gli eventi (come lo scorrimento) per essere licenziato.

Speriamo che questo possa guidare qualcuno alla risposta corretta.

+0

Questo non risolve il problema in chrome. Rimane non cedibile. – Tikkes

0

Il tag dell'oggetto sta causando il problema. Se stai solo visualizzando un'immagine all'interno dell'oggetto, perché non usare semplicemente un tag immagine?

http://jsfiddle.net/bSaBm/

<div class="container"> 
    <div class="box"> 
     <img class="image" src="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg"/> 
    </div> 
</div> 
+0

L'autore della domanda ha già riferito di aver bisogno del tag dell'oggetto. Questo sta ignorando il problema, non risolvendolo ed è già stato suggerito molte volte. – Tikkes

+0

@Tikkes L'autore deve ancora dare una ragione PERCHÉ sta usando il tag dell'oggetto. All'interno del codice che ha fornito, il tag dell'oggetto non ha scopo. Finché l'autore non fornisce una ragione razionale per utilizzarlo, questa è una risposta valida. –

+0

E il fatto che l'autore abbia impostato l'attributo data a un'immagine senza specificare un tipo, E incluso un tag img all'interno dell'oggetto non dà credibilità alla sua soluzione. –

Problemi correlati