div scrollbar nicht angezeigt

Verwende ich css-selten, aber ich dachte, dass sollten die folgenden erstellen Sie einen scrollbaren Bereich. Stattdessen scheint es nur ausblenden, alle der text, der passt nicht, bietet aber keine Möglichkeit zum scrollen. Verhalten scheint das gleiche in chrome/ie/firefox), so dass ich vermute, ich bin nur etwas falsch.

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Foo</title>
  </head>
  <body>
    <div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
    </div>
  </body>
</html>

Stil.css

#history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: hidden;
}

div scrollbar nicht angezeigt

  • haben Sie versuchen .scroll-area { overflow-y: scroll; overflow: hidden; }
  • Vielen Dank, jeder. Das overflow: hidden war definitiv das problem! Schätzen Sie die super-schnellen Antworten.
InformationsquelleAutor Alex Pritchard | 2013-04-25
  1. 2

    Nun sind Sie mit overflow-style, die nicht unterstützt wird in allen gängigen browser noch ..

    Einstellung overflow auf auto oder scroll auf .scroll-area wird der vertikale Scrollbalken angezeigt, wie erwartet

    http://jsfiddle.net/kRcaR/1/

    • Ausgewählt diese Antwort für den Tipp über mangelnde browser-Unterstützung. Danke!
    InformationsquelleAutor adrift
  2. 2

    Sollten Sie explizit festlegen overflow zu auto (oder zu scroll wenn Sie brauchen, scrollbars erscheinen):

    .scroll-area {
    overflow: auto;
}

    DEMO: http://jsfiddle.net/aNTHx/

    InformationsquelleAutor VisioN
  3. 1

    Müssen Sie overflow: auto oder wenn Sie wollen einfach nur die y-Achse scrollen overflow-y: auto; overflow-x: hidden;

    InformationsquelleAutor Foreign Object
  4. 1

    Dein div sollte dieser überlauf styling für den vertikalen Bildlauf:

    .scroll-area {
  overflow-y: scroll;
}

    Oder wenn Sie wollen Blättern Sie horizontal:

    .scroll-area {
  overflow-x: scroll;
}
    InformationsquelleAutor Cory Shaw
  5. 1

    Ihre verbergen die Bildlaufleiste mit overflow: hidden;.

    Wenn Sie sich ändern:

    .scroll-area {
    overflow-style: auto;
    overflow: auto;
}
    InformationsquelleAutor ajtrichards
  6. 1

    HTML

    <div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>

    CSS

    #history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: scroll;
}

    DEMO

    http://jsfiddle.net/YxsLc/1/

    ERKLÄRUNG

    Wenn Sie möchten, zu scrollen Inhalt in html-Elementen sollten Sie über die Eigenschaft overflow: scroll;

    Goodluck in Zukunft code.

    InformationsquelleAutor Bartek Bielawa
Schreibe einen Kommentar