2016-06-08 6 views
1

Ich habe diese Website: http://fosterinnovationculture.com/infographic/index.html und ich habe ein Problem beim Anzeigen der vertikalen Bildlaufleiste. Der Elternteil div hat einen Stil von overflow: hidden;. Ich setze overflow-y: scroll; auf das Kind div so scrollt es, aber es zeigt keine Bildlaufleiste. Weiß jemand, warum es nicht angezeigt wird? HierVertikale Scroll-Leiste zeigt nicht

ist der Code für die .scroll Klasse:

.scroll { 
    height: 90vh; 
    width: 100%; 
    overflow-y: scroll; 
    margin: 0 auto; 
    -webkit-overflow-scrolling: touch; 
} 

Hier ist der Code für das übergeordnete div:

#users { 
overflow: hidden; 
} 
+7

Bitte fügen Sie aussagekräftige Code und eine Problembeschreibung hier. Verknüpfen Sie nicht einfach mit der Website , die behoben werden muss - andernfalls wird diese Frage an zukünftige Besucher verloren gehen, sobald das Problem gelöst ist oder wenn die Website, auf die Sie verlinken, nicht erreichbar ist. Wenn Sie ein [Minimales, vollständiges und verifizierbares Beispiel (MCVE)] (http://stackoverflow.com/help/mcve) schreiben, dass Ihr Problem demonstriert, können Sie bessere Antworten erhalten. Weitere Informationen finden Sie unter [Etwas auf meiner Website funktioniert nicht. Kann ich einfach einen Link einfügen?] (Http://meta.stackexchange.com/questions/125997/) Danke! – j08691

+0

Ziehen Sie in Betracht, relevanten HTML- und CSS-Code hinzuzufügen – Pushpendra

Antwort

2

Bevor eine Antwort zu geben, werde ich sagen, dass das Wichtigste, was ich mir sagen, wenn CSS-Codierung ist: wenn ich mit beginnen dann hacken I mach es zu kompliziert.

Beginnen Sie damit, indem Sie jede Instanz von overflow: hidden; in Ihrem Code entfernen.

Dann ist diese erhalten dort:

.top-nav { 
    height: 70px; /* you already specify this on your site */ 
} 
.scroll { 
    position: absolute; 
    top: 70px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    overflow-y: scroll; 
} 
+0

Ja, ich stimme zu. Ich hatte das Gefühl, dass ich es zu kompliziert machte. Ich habe genau das gemacht, was Sie vorgeschlagen haben, aber es zeigt immer noch keine Bildlaufleiste. http://fosterinnovationculture.com/infographic2/index.html – marcos

+0

@marcos Ich hatte es auf Ihrer Website arbeiten nur mit dem Web-Inspektor in meinem Browser. Lass mich sehen, was du sonst noch brauchst. –

+0

@marcos jetzt loswerden 'Höhe: 100%' on '.scroll' Attribut –

0

Sie nur eine vertikale Bildlaufleiste angezeigt, wenn die Website des/Elements Breite ist größer als der Bildschirm.

Beispiel:

body { 
 
    width: 120%; 
 
}
<!doctype html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    </head> 
 
    
 
    <body> 
 
    Some stuff. 
 
    </body> 
 
</html>

+1

Ich habe ein Problem zu verstehen, was die vertikale Bildlaufleiste mit der Breite zu tun hat. Ich kann verstehen, dass eine Breite von 120% die horizontale Bildlaufleiste anzeigen würde, warum würde dies eine vertikale Bildlaufleiste anzeigen? – marcos

+0

xDevs23 Ich glaube, das ist nur der Fall für eine horizontale Bildlaufleiste nicht vertikal – happymacarts

+0

Oh Entschuldigung, meine Schuld. – xdevs23

Verwandte Themen