Ist es möglich, die overflow:auto
eines Div zu überprüfen ?
Beispielsweise:
HTML
<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class">
* content
</div>
JQUERY
$('.my_class').live('hover', function (event)
{
if (event.type == 'mouseenter')
{
if( ... if scrollbar visible ? ... )
{
alert('true'):
}
else
{
alert('false'):
}
}
});
Manchmal ist der Inhalt kurz (keine Bildlaufleiste) und manchmal lang (Bildlaufleiste sichtbar).
> this.innerHeight();
jsfiddle.net/p3FFL/210Vielleicht eine einfachere Lösung.
quelle
.ready()
Sie können dies mit einer Kombination der Attribute
Element.scrollHeight
und tunElement.clientHeight
.Laut MDN:
Und:
Daher zeigt das Element eine Bildlaufleiste an, wenn die Bildlaufhöhe größer als die Clienthöhe ist. Die Antwort auf Ihre Frage lautet also:
quelle
Ich sollte ein wenig an dem ändern, was Reigel gesagt hat:
innerHeight zählt die Höhe des Steuerelements sowie dessen obere und untere Polsterung
quelle
Dies erweitert die Antwort von @ Reigel. Es wird eine Antwort für horizontale oder vertikale Bildlaufleisten zurückgegeben.
Beispiel:
quelle
Sie benötigen element.scrollHeight . Vergleichen Sie es mit
$(element).height()
.quelle
Ich habe einen neuen benutzerdefinierten Pseudo-Selektor für jQuery erstellt, um zu testen, ob ein Element eine der folgenden CSS-Eigenschaften hat:
Ich wollte das nächste scrollbare übergeordnete Element eines anderen Elements finden, also habe ich auch ein weiteres kleines jQuery-Plugin geschrieben, um das nächstgelegene übergeordnete Element mit Überlauf zu finden.
Diese Lösung bietet wahrscheinlich nicht die beste Leistung, scheint jedoch zu funktionieren. Ich habe es in Verbindung mit dem Plugin $ .scrollTo verwendet. Manchmal muss ich wissen, ob sich ein Element in einem anderen scrollbaren Container befindet. In diesem Fall möchte ich das übergeordnete scrollbare Element gegen das Fenster scrollen.
Ich hätte dies wahrscheinlich in ein einzelnes Plugin einwickeln und den Pseudo-Selektor als Teil des Plugins hinzufügen sowie eine 'nächste' Methode verfügbar machen sollen, um den nächsten (übergeordneten) scrollbaren Container zu finden.
Egal ... hier ist es.
$ .isScrollable jQuery Plugin:
$ (': scrollable') jQuery-Pseudo-Selektor:
$ .scrollableparent () jQuery-Plugin:
Die Implementierung ist ziemlich einfach
UPDATE: Ich habe festgestellt, dass Robert Koritnik bereits einen viel leistungsstärkeren: scrollbaren Pseudo-Selektor entwickelt hat, der die scrollbaren Achsen und die Höhe von scrollbaren Containern als Teil seines jQuery-Plugins $ .scrollintoview () identifiziert. scrollintoview Plugin
Hier ist sein ausgefallener Pseudo-Selektor (Requisiten):
quelle
Die erste Lösung oben funktioniert nur im IE. Die zweite Lösung oben funktioniert nur in FF
Diese Kombination beider Funktionen funktioniert in beiden Browsern:
HTH
quelle
(scrollWidth / Height - clientWidth / Height) ist ein guter Indikator für das Vorhandensein einer Bildlaufleiste, gibt Ihnen jedoch bei vielen Gelegenheiten eine "falsch positive" Antwort. Wenn Sie genau sein müssen, würde ich vorschlagen, die folgende Funktion zu verwenden. anstatt zu erraten, ob das Element scrollbar ist - Sie können es scrollen ...
quelle
Ugh, alle Antworten hier sind unvollständig, und lassen Sie uns bitte die Verwendung von jquery in SO-Antworten bereits beenden. Überprüfen Sie die Dokumentation von jquery, wenn Sie Informationen zu jquery wünschen.
Hier ist eine verallgemeinerte reine Javascript-Funktion, mit der Sie testen können, ob ein Element vollständig über Bildlaufleisten verfügt:
quelle
Ich werde dies noch weiter ausdehnen für jene armen Seelen, die wie ich eines der modernen js-Frameworks und nicht JQuery verwenden und von den Leuten dieses Threads völlig verlassen wurden:
Dies wurde in Angular 6 geschrieben, aber wenn Sie React 16, Vue 2, Polymer, Ionic, React-Native schreiben, wissen Sie, was Sie tun müssen, um es anzupassen. Und es ist die ganze Komponente, also sollte es einfach sein.
im html würde es ein div mit der klasse "elem-list" geben, das im css oder scss so stilisiert ist, dass es einen
height
und einenoverflow
wert hat, der nicht isthidden
. (soauto
oder sosroll
)Ich löse diese Auswertung bei einem Bildlaufereignis aus, weil mein Endziel darin bestand, "automatische Fokusschriftrollen" zu haben, die entscheiden, ob sie den gesamten Satz von Komponenten horizontal scrollen, wenn für diese Komponenten kein vertikaler Bildlauf verfügbar ist, und ansonsten nur die Innereien eines der Komponenten scrollen Komponenten vertikal.
Sie können die Auswertung jedoch an einer anderen Stelle platzieren, damit sie durch etwas anderes ausgelöst wird.
Das Wichtigste dabei ist, dass Sie nie wieder gezwungen werden, JQuery zu verwenden. Es gibt immer eine Möglichkeit, auf dieselben Funktionen zuzugreifen, ohne JQuery zu verwenden, ohne es zu verwenden.
quelle
this
bleibt der übergeordnete Bereich erhalten.th = this;
ist unnötig.function(){}.bind(this)
Hier ist eine verbesserte Version von Evans Antwort, die die Überlauflogik richtig zu berücksichtigen scheint.
quelle
Die oben angegebenen Lösungen funktionieren in den meisten Fällen, aber die Überprüfung von scrollHeight und Überlauf reicht manchmal nicht aus und kann für Body- und HTML-Elemente fehlschlagen, wie hier dargestellt: https://codepen.io/anon/pen/EvzXZw
1. Lösung - Überprüfen Sie, ob das Element scrollbar ist:
Hinweis: Elemente mit
overflow: hidden
werden auch als scrollbar behandelt ( weitere Informationen ). Sie können daher bei Bedarf auch eine Bedingung hinzufügen:Soweit ich weiß, schlägt diese Methode nur fehl, wenn das Element hat
scroll-behavior: smooth
.Erläuterung: Der Trick besteht darin, dass der Versuch, nach unten zu scrollen und zurückzusetzen, vom Browser nicht gerendert wird. Die oberste Funktion kann auch wie folgt geschrieben werden:
Code-Snippet anzeigen
2. Lösung - Führen Sie alle erforderlichen Überprüfungen durch:
quelle
Hier ist meine Verbesserung: parseInt hinzugefügt. Aus irgendeinem seltsamen Grund hat es ohne nicht funktioniert.
quelle
Funktioniert unter Chrome , Edge , Firefox und Opera , zumindest in den neueren Versionen.
Verwenden von JQuery ...
Richten Sie diese Funktion ein, um die Fußzeile zu reparieren:
Es gibt eine Funktion zurück. Auf diese Weise gemacht, nur um den Körper und die Fußzeile einmal einzustellen.
Stellen Sie dies dann ein, wenn das Dokument fertig ist.
Fügen Sie dies Ihrem Fußzeilen-CSS hinzu:
quelle
Die meisten der vorgestellten Antworten brachten mich nahe an den Ort, an dem ich sein musste, aber nicht ganz dort.
Grundsätzlich wollten wir beurteilen, ob die Bildlaufleisten in einer normalen Situation sichtbar sind. Nach dieser Definition bedeutet dies, dass die Größe des Körperelements größer als der Ansichtsfenster ist. Dies war keine vorgestellte Lösung, weshalb ich sie einreiche.
Hoffentlich hilft es jemandem!
Im Wesentlichen haben wir die
hasScrollbar
Funktion, kehren aber zurück, wenn das angeforderte Element größer als der Ansichtsport ist. Für die Größe des Ansichtsports haben wir gerade verwendet$(window).height()
. Ein schneller Vergleich mit der Elementgröße ergibt die richtigen Ergebnisse und das gewünschte Verhalten.quelle
Suchen Sie ein übergeordnetes Element des aktuellen Elements mit vertikalem Bildlauf oder Körper.
Es kann verwendet werden, um automatisch zum aktuellen Element zu scrollen über:
quelle
Ein No Framework JavaScript-Ansatz, der sowohl vertikal als auch horizontal überprüft
Verwenden Sie es so
quelle