2013-08-22 9 views
7

Ich habe dieses Beispiel:Scrollbare div ist nicht scrollbaren, wenn über das Bild schwebt

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

Hover auf das Bild, und Sie werden von Bild nicht außerhalb bewegen können, schweben, und Sie können blättern. Ich muss scrollen können, auch wenn ich über dem Bild schwebe.

Was mache ich falsch?

+4

Warum Sie ein '' Element verwenden? – Mooseman

+2

Schließen Sie auch Ihr '' Tag, das löst das Problem zwar nicht, aber fügen Sie ein'/'am Ende hinzu. '' – Tikkes

+0

Ich muss das Element verwenden. @Mooseman –

Antwort

0

Bearbeiten 2 Ich entfernte die object in dieser Geige. Es diente in dem Beispiel http://jsfiddle.net/aS972/6/ keinem Zweck. Wenn Sie es jedoch zurücklassen müssen, verwenden Sie dies im Objektblock, wie bereits jemand anderes gesagt hat.

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

bearbeiten

Ok, Ihr Problem ist, dass Ihre Inhalte auch dann nicht überschreiten 500px so kann man nicht wissen, ob es scrollbaren ist oder nicht. Wenn Sie mehr Inhalt wie diesen http://jsfiddle.net/aS972/5/ hinzufügen, funktioniert es gut. Das Setzen der height auf auto führte dazu, dass die .container Box auf die Größe .box expandierte und daher scrollbar wurde, weil sie so groß war.

Ändern Sie Ihren Container CSS, um 'Höhe' als 'Auto' zu haben. Die Größe der '.box' zu vergrößern, schien es zu vermasseln.

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

Der Container soll scrollbar sein. –

+0

I + 1'ed diese Antwort, weil ich sah, dass es die Frage löst. Aber kannst du uns bitte dieses Wunder erklären? Was ist hier gerade passiert? – ygesher

+0

Ich habe die Antwort für alle aktualisiert –

1

Eine Menge Zeit mit Flash-Video müssen Sie eine <param name="wmode" value="transparent" /> innerhalb des <object> Tag hinzufügen html, um über sie und Ereignisse zu machen (wie Scrollen) gebrannt werden.

Hoffentlich kann das jemanden zur richtigen Antwort lenken.

+0

Dies löst das Problem in Chrom nicht. Es bleibt unscrollbar. – Tikkes

0

Das Objekt-Tag verursacht das Problem. Wenn Sie nur ein Bild im Objekt anzeigen, verwenden Sie einfach ein Bild-Tag.

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

Der Autor der Frage hat bereits berichtet, dass er das Objekt-Tag benötigt. Dies ignoriert das Problem, löst es nicht und wurde schon oft vorgeschlagen. – Tikkes

+0

@Tikkes Der Autor hat noch einen Grund zu geben, WARUM er das Objekt-Tag verwendet. Innerhalb des von ihm bereitgestellten Codes dient das Objekt-Tag keinem Zweck. Bis der Autor einen vernünftigen Grund für die Verwendung gibt, ist dies eine gültige Antwort. –

+0

Und die Tatsache, dass der Autor das Datenattribut auf ein Bild ohne Angabe eines Typs festgelegt hat, UND ein img-Tag in das Objekt eingefügt hat, gibt seiner Lösung keine Glaubwürdigkeit. –

Verwandte Themen