.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
<div class="scrollbox">
<ul>
<li>Not enough content to scroll</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="scrollbox">
<ul>
<li>Ah! Scroll below!</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>The end!</li>
<li>No shadow there.</li>
</ul>
</div>
Das Element kann vertikal, horizontal oder beides überflogen werden. Diese Funktion gibt einen booleschen Wert zurück, wenn das DOM-Element übergelaufen ist:
Code-Snippet anzeigen
ES6-Beispiel:
quelle
$("#element").overflown()
):$.fn.overflown=function(){var e=this[0];return e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth;}
element.addEventListener ("overflow", () => log( "overflow" ), false);
Referenz: ÜberlaufereignisIm Vergleich
element.scrollHeight
zuelement.clientHeight
sollte die Aufgabe erledigen.Unten sehen Sie die Bilder von MDN, die Element.scrollHeight und Element.clientHeight erläutern.
quelle
Ich habe einen mehrteiligen Codepen erstellt, der die obigen Antworten demonstriert (z. B. unter Verwendung von verstecktem Überlauf und Höhe), aber auch, wie Sie übergelaufene Elemente erweitern / reduzieren würden
Beispiel 1: https://codepen.io/Kagerjay/pen/rraKLB (Wirklich einfaches Beispiel, kein Javascript, nur um übergelaufene Elemente zu beschneiden)
Beispiel 2: https://codepen.io/Kagerjay/pen/LBErJL (Einzelereignishandler zeigt mehr / Showless bei übergelaufenen Elementen an)
Beispiel 3: https://codepen.io/Kagerjay/pen/MBYBoJ (Multi-Event-Handler bei vielen zeigen mehr / weniger bei übergelaufenen Elementen)
Ich habe auch Beispiel 3 unten angehängt. Ich verwende Jade / Mops, damit es ein bisschen ausführlich ist. Ich schlage vor, die Codepens zu überprüfen, die ich einfacher zu verstehen gemacht habe.
quelle
Würde so etwas funktionieren : http://jsfiddle.net/Skooljester/jWRRA/1/ ? Es überprüft lediglich die Höhe des Inhalts und vergleicht ihn mit der Höhe des Containers. Wenn es größer ist als Sie, können Sie den Code eingeben, um eine Schaltfläche "Mehr anzeigen" anzuhängen.
Update: Der Code wurde hinzugefügt, um oben im Container eine Schaltfläche "Mehr anzeigen" zu erstellen.
quelle
Wenn Sie jQuery verwenden, können Sie einen Trick ausprobieren: Machen Sie ein äußeres Div mit
overflow: hidden
und ein inneres Div mit Inhalt. Verwenden Sie dann die.height()
Funktion, um zu überprüfen, ob die Höhe des inneren Teils größer als die Höhe des äußeren Teils ist. Ich bin nicht sicher, ob es funktionieren wird, aber probieren Sie es aus.quelle
Verwenden Sie js, um zu überprüfen, ob das Kind
offsetHeight
mehr als die Eltern ist. Wenn dies derscroll/hidden/auto
Fall ist, lassen Sie die Eltern überlaufen, je nachdem, was Sie möchten, und auchdisplay:block
auf der anderen Seite.quelle
Sie können die Grenzen relativ zum übergeordneten Versatz überprüfen.
Wenn Sie diesem Element ein Element übergeben, werden Sie darüber informiert, ob sich seine Grenzen vollständig in einem Container befinden. Wenn kein expliziter Container angegeben ist, wird standardmäßig das übergeordnete Element des Elements verwendet. Es verwendet
quelle
Ein weiteres Problem, das Sie berücksichtigen sollten, ist die Nichtverfügbarkeit von JS. Denken Sie an fortschreitende Verzauberung oder anmutige Erniedrigung. Ich würde vorschlagen:
quelle
Hier ist eine Geige zum Bestimmen, ob ein Element mithilfe eines Wrapper-Div mit Überlauf übergelaufen ist: hidden und JQuery height (), um den Unterschied zwischen dem Wrapper und einem Div mit innerem Inhalt zu messen.
Quelle: Frameworks & Extensions auf jsfiddle.net
quelle
Dies ist die jQuery-Lösung, die für mich funktioniert hat.
clientWidth
usw. hat nicht funktioniert.Wenn dies nicht funktioniert, stellen Sie sicher, dass das übergeordnete Element die gewünschte Breite hat (persönlich musste ich es verwenden
parent().parent())
. Esposition
ist relativ zum übergeordnetenextra_width
Element . Ich habe es auch hinzugefügt, da meine Elemente ("Tags") Bilder enthalten, für die nur wenig Zeit erforderlich ist Laden, aber während des Funktionsaufrufs haben sie eine Breite von Null, was die Berechnung beeinträchtigt. Um dies zu umgehen, verwende ich den folgenden Aufrufcode:Hoffe das hilft.
quelle
Das wurde für mich gearbeitet. Danke dir.
quelle
Die jquery-Alternative zur Antwort besteht darin, mit der Taste [0] auf das Rohelement wie das folgende zuzugreifen:
quelle
Ich habe Element aus Kapselungsgründen erweitert. Von Micnic Antwort.
Verwenden Sie es so
quelle