Überprüfen Sie, ob das HTML-Element Bildlaufleisten enthält

Was ist der schnellste Weg, um zu überprüfen, ob ein Element Bildlaufleisten hat?

Eine Sache ist natürlich, zu überprüfen, ob das Element größer als sein Ansichtsfenster ist, was leicht durch Überprüfen dieser beiden Werte erreicht werden kann:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

Das bedeutet aber nicht, dass es auch Bildlaufleisten gibt (so dass es tatsächlich von Menschen gescrollt werden kann).

Frage

Wie suche ich in einem 1- Cross-Browser und 2- Javascript (wie in keiner jQuery ) nach Bildlaufleisten ?

Nur Javascript, weil ich so wenig Overhead wie möglich benötige, weil ich einen sehr schnellen jQuery-Auswahlfilter schreiben möchte

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

Ich müsste wohl nach Stileinstellungen overflowsuchen, aber wie mache ich das browserübergreifend?

Zusätzliche Bearbeitung

Nicht nur overflowStileinstellungen. Zu überprüfen, ob ein Element eine Bildlaufleiste hat, ist nicht so trivial, wie es scheint. Die erste Formel, die ich oben geschrieben habe, funktioniert einwandfrei, wenn das Element keinen Rand hat, aber wenn dies der Fall ist (insbesondere wenn der Rand eine beträchtliche Breite hat), offsetkann die scrollBemaßung größer als die Bemaßung sein, das Element kann jedoch weiterhin scrollbar sein. Wir müssen tatsächlich Ränder von der offsetDimension subtrahieren , um das tatsächliche scrollbare Ansichtsfenster des Elements zu erhalten und dieses mit der scrollDimension zu vergleichen .

Zum späteren Nachschlagen

:scrollableDer jQuery-Auswahlfilter ist in meinem .scrollintoview()jQuery-Plugin enthalten. Den vollständigen Code finden Sie in meinem Blog-Beitrag, falls jemand ihn benötigt. Obwohl es nicht die eigentliche Lösung lieferte, half mir Soumyas Code erheblich, das Problem zu lösen. Es zeigte mir in die richtige Richtung.

Ich habe das vor ein paar Wochen irgendwo gefunden. Es hat bei mir funktioniert.

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

Versuchen:

Für vertikale Bildlaufleiste

el.scrollHeight> el.clientHeight

Für horizontale Bildlaufleiste

el.scrollWidth> el.clientWidth

Ich weiß, dass dies zumindest für IE8 und Firefox 3.6+ funktioniert.

Dies mag ein wenig hackisch erscheinen (oder sein) , aber Sie können die Eigenschaften scrollTopund testen scrollLeft.

Wenn sie größer als 0 sind, wissen Sie, dass es Bildlaufleisten gibt. Wenn sie 0 sind, setzen Sie sie auf 1 und testen Sie sie erneut, um festzustellen, ob Sie ein Ergebnis von 1 erhalten. Setzen Sie sie dann wieder auf 0.

Beispiel: http://jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

Ich glaube, es gibt eine andere Eigenschaft für IE, also werde ich in einer Minute damit aktualisieren.

BEARBEITEN: Es scheint, als ob der IE diese Eigenschaft unterstützt. (Ich kann den IE momentan nicht testen.)

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

Hier ist noch eine andere Lösung:

Wie einige Leute betonten, reicht es nicht aus, nur offsetHeight und scrollHeight zu vergleichen, da sie sich bei Elementen mit verstecktem Überlauf usw. unterscheiden, die noch keine Bildlaufleisten haben. Hier überprüfe ich auch, ob der Überlauf bei den berechneten Stilen für das Element scrollt oder automatisch ist:

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

Ich bin vielleicht etwas spät zur Party, aber ...

Ich glaube, Sie können Bildlaufleisten mit e.offsetWidth vs. e.clientWidth erkennen. Die versetzte Breite umfasst Rahmen und Bildlaufleisten, Auffüllung und Breite. Die Clientbreite umfasst Polsterung und Breite. Bitte sehen Sie:

https://developer.mozilla.org/en/DOM/element.offsetWidth (zweites Bild) https://developer.mozilla.org/en/DOM/element.clientWidth (zweites Bild)

Sie müssen überprüfen:

1. Gibt an, ob für das Element der Überlauf auf Auto / Scroll (einschließlich Überlauf X / Y) eingestellt ist, wobei der berechnete / kaskadierte / aktuelle Stil verwendet wird.
2. Wenn für das Element ein Überlauf auf Auto / Scroll eingestellt ist. Richten Sie die Offsetbreite und die Clientbreite ein.
3. Wenn die clientWidth kleiner als der rechte Rand von offsetWidth - rechts ist (wieder gefunden durch den berechneten / kaskadierten / aktuellen Stil), wissen Sie, dass Sie eine Bildlaufleiste haben.

Machen Sie dasselbe für die Vertikale (Offset / ClientHeight).

IE7 meldet für einige Elemente eine clientHeight von 0 (ich habe nicht überprüft, warum), daher benötigen Sie immer die erste Überlaufprüfung.

Hoffe das hilft!

Es gibt verschiedene Probleme bei der Überprüfung des Vorhandenseins von Bildlaufleisten. Eines davon ist, dass Sie auf einem Mac keine sichtbare Bildlaufleiste haben, sodass beide oben genannten Lösungen keine genaue Antwort liefern.

Da das Rendern des Browsers nicht sehr häufig ist, können Sie den vorhandenen Bildlauf durch Ändern des Bildlaufs überprüfen und dann zurücksetzen:

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

Ich habe hier nur rumgespielt, da (bisher) keine der oben genannten Lösungen für mich funktioniert hat. Ich habe einige Erfolge beim Vergleich der Scrollhöhe eines Div mit seiner Offsethöhe erzielt

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

Es scheint mir einen genauen Vergleich zu geben ... bis jetzt. Weiß jemand, ob dies legitim ist?

Für IE11 (Internet Explorer 11) musste ich die Logik ändern in:

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

Dies liegt daran, dass der IE scrollHeight als 1 größer als clientHeight meldet, wenn keine Bildlaufleiste vorhanden ist, aber ungefähr 9 größer, wenn eine Bildlaufleiste vorhanden ist

Wenn Sie wissen möchten, ob eine Bildlaufleiste für die gesamte Webseite vorhanden ist und die vollständige Browserunterstützung verfügbar ist, können Sie Folgendes verwenden:

const hasScrollbar = document.body.scrollHeight > window.innerHeight

Es ist wichtig, window.innerHeightstatt zu verwenden, document.body.clientHeightda in einigen mobilen Browsern clientHeight nicht die Größe der Adressleiste erhält, scrollHeight jedoch, sodass Sie falsche Berechnungen erhalten.

Keine dieser Antworten ist richtig. Sie müssen dies verwenden:

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

Fügen Sie ein 100% breites Element hinzu. Stellen Sie dann den Überlauf auf versteckt. Wenn sich der berechnete Stil des Elements (aus jQ) ändert, hatte das übergeordnete Element eine Bildlaufleiste.

EDIT: Anscheinend möchten Sie eine browserübergreifende Methode wie getComputedStyle . Versuchen:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}