Vertikale Scrollbarkeit eines Divs mit CSS

Question

Diese

<div id="" style="overflow:scroll; height:400px;">

gibt eine div dass der Benutzer sowohl horizontal als auch vertikal blättern kann. Wie ändere ich es so, dass die div ist nur vertikal verschiebbar?

Answer 1

Sie können verwenden overflow-y: scroll für den vertikalen Bildlauf.

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 </div>

Answer 2

Das Problem bei all diesen Antworten war für mich, dass sie nicht ansprechbar waren. Ich musste eine feste Höhe für ein übergeordnetes Div haben, die ich nicht wollte. Ich wollte auch nicht zu verbringen eine Tonne Zeit tüfteln mit Media Queries. Wenn Sie Angular verwenden, können Sie bootstraps tabset verwenden, und es wird all die harte Arbeit für Sie tun. Sie werden in der Lage sein, den inneren Inhalt zu scrollen und er wird responsive sein. Wenn Sie die Registerkarte einrichten, tun Sie es wie folgt: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... der Punkt ist, Sie wollen keinen Titel oder Bild-Symbol. dann verstecken Sie den Umriss der Registerkarte in cs wie diese:

.nav-tabs {
   border-bottom:none; 
} 

und auch dies .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} und schließlich die unsichtbare Registerkarte zu entfernen, auf die man immer noch klicken kann, wenn man dies nicht implementiert: .nav > li > a {padding:0px;margin:0px;}

Answer 3

Ich habe dem Code einige Kommentare zur Erläuterung hinzugefügt. Und hier ist eine Referenz: https://www.w3schools.com/css/css_overflow.asp

div {
  overflow-y: auto; /* the auto value is similar to scroll, but it adds scrollbars only when necessary */
  word-break: keep-all; /* this is optional, so the words keep in one line */
  white-space: nowrap; /* this is optional, so the div can expands to the side */
}

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Answer 4

Nun, die obigen Antworten haben die Hälfte der Frage gut erklärt. Für die andere Hälfte.

Warum blenden Sie nicht einfach die Bildlaufleiste selbst aus? Auf diese Weise wird es ansprechender aussehen, da die meisten Leute (mich eingeschlossen) die Bildlaufleiste hassen. Sie können diesen Code verwenden

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

Answer 5

Siehe diese Zusammenfassung: https://gist.github.com/zeoneo/5f9fff92a12aa6d9d42065b5df68e9d5

Es könnte Ihnen helfen, ein Layout zu erstellen, das Flex verwendet und selbst scrollbare geteilte Bereiche hat.

body {
                background-color: aquamarine;
                margin: 0;
                padding: 0;
            }
            .container {
                height: 100vh;
                display: flex;
                flex-direction: column;
                background-color: bisque;
            }
            .left {
                width: 300px;
                background-color: lightblue;
                overflow: auto;
                scroll-behavior: smooth;

            }
            .right {
                flex:1;
                background-color: lightcoral;
                overflow: auto;
                scroll-behavior: smooth;
            }
            .sidebar-item {
                display: block;
                height: 100px;
                background-color: lightseagreen;
                margin: 5px;
            }
            .header {
                display: block;
                height: 100px;
                flex:none;
                background-color: aqua;
            }
            .content {
                flex:1;
                background-color: brown;
                display: flex;
                overflow: auto;
            }

<html>
    <head>
        <title>Hello World</title>

    </head>
    <body>
        <div class="container">
            <div class="header">
                Header
            </div>
            <div class="content">

            <div class="left myscroll">
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
            </div>
            <div class="right">
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
            </div>
        </div>

        </div>
    </body>
</html>