Erkennen, ob eine Seite eine vertikale Bildlaufleiste hat?

Ich möchte nur ein einfaches JQ / JS, um zu überprüfen, ob die aktuelle Seite / das aktuelle Fenster (kein bestimmtes Element) eine vertikale Bildlaufleiste hat.

Googeln gibt mir Dinge, die nur für diese Grundfunktion zu komplex erscheinen.

Wie kann das gemacht werden?

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

Versuche dies:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

Dies zeigt Ihnen jedoch nur an, ob die vertikale scrollHeight größer als die Höhe des sichtbaren Inhalts ist. Die hasVScrollVariable enthält true oder false.

Wenn Sie eine gründlichere Überprüfung durchführen müssen, fügen Sie dem obigen Code Folgendes hinzu:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

Ich habe die vorherige Antwort ausprobiert und scheint nicht mit $ ("body") zu arbeiten. Height () repräsentiert nicht unbedingt die gesamte HTML-Höhe.

Ich habe die Lösung wie folgt korrigiert:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

Lassen Sie uns diese Frage von den Toten zurückbringen;) Es gibt einen Grund, warum Google Ihnen keine einfache Lösung bietet. Sonderfälle und Browser-Macken wirken sich auf die Berechnung aus und sind nicht so trivial, wie es scheint.

Leider gibt es bisher Probleme mit den hier beschriebenen Lösungen. Ich möchte sie überhaupt nicht herabsetzen - sie sind gute Ausgangspunkte und berühren alle Schlüsseleigenschaften, die für einen robusteren Ansatz erforderlich sind. Aber ich würde nicht empfehlen, den Code aus einer der anderen Antworten zu kopieren und einzufügen, weil

• Sie erfassen den Effekt von positionierten Inhalten nicht auf eine Weise, die zuverlässig und browserübergreifend ist. Die Antworten, die auf der Körpergröße basieren, verfehlen dies vollständig (der Körper ist nicht das versetzte übergeordnete Element eines solchen Inhalts, es sei denn, er ist selbst positioniert). Und diese Antworten überprüfen $( document ).width()und .height()fallen der fehlerhaften Erkennung der Dokumentgröße durch jQuery zum Opfer .
• Unter Berufung auf window.innerWidth, wenn der Browser unterstützt, Ihr Code macht Scrollbalken in mobilen Browsern erkennen ausfallen, wobei die Breite der Bildlaufleiste ist in der Regel 0. Sie sind nur vorübergehend als Overlay angezeigt und nehmen nicht Raum in dem Dokument . Auf diese Weise wird auch das Zoomen auf dem Handy zum Problem (lange Geschichte).
• Die Erkennung kann deaktiviert werden, wenn Benutzer den Überlauf des Elements htmlund des bodyElements explizit auf nicht standardmäßige Werte setzen (was dann passiert, ist ein wenig kompliziert - siehe diese Beschreibung ).
• In den meisten Antworten werden Körperpolster, Ränder oder Ränder nicht erkannt und verzerren die Ergebnisse.

Ich habe mehr Zeit damit verbracht, als ich mir vorgestellt hätte, eine Lösung zu finden, die "einfach funktioniert" (Husten). Der Algorithmus, den ich mir ausgedacht habe , ist jetzt Teil eines Plugins, jQuery.isInView , das eine .hasScrollbarMethode verfügbar macht . Schauen Sie sich die Quelle an, wenn Sie möchten.

In einem Szenario, in dem Sie die volle Kontrolle über die Seite haben und sich nicht mit unbekanntem CSS befassen müssen, kann die Verwendung eines Plugins übertrieben sein - schließlich wissen Sie, welche Randfälle zutreffen und welche nicht. Wenn Sie jedoch zuverlässige Ergebnisse in einer unbekannten Umgebung benötigen, sind die hier beschriebenen Lösungen meiner Meinung nach nicht ausreichend. Sie sind besser dran, wenn Sie ein gut getestetes Plugin verwenden - meins oder sonst jemand.

Dieser hat für mich funktioniert:

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

Für den Körper einfach verwenden hasVerticalScroll().

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

Seltsamerweise sagt Ihnen keine dieser Lösungen, ob eine Seite eine vertikale Bildlaufleiste hat.

window.innerWidth - document.body.clientWidthgibt Ihnen die Breite der Bildlaufleiste. Dies sollte in jedem IE9 + funktionieren (nicht in den kleineren Browsern getestet). (Oder um die Frage streng zu beantworten,!!(window.innerWidth - document.body.clientWidth)

Warum? Angenommen, Sie haben eine Seite, auf der der Inhalt größer als die Fensterhöhe ist und der Benutzer nach oben / unten scrollen kann. Wenn Sie Chrome auf einem Mac ohne angeschlossene Maus verwenden, wird dem Benutzer keine Bildlaufleiste angezeigt. Schließen Sie eine Maus an und eine Bildlaufleiste wird angezeigt. (Beachten Sie, dass dieses Verhalten überschrieben werden kann, dies ist jedoch die Standard-AFAIK.)

Ich habe Vanila-Lösung gefunden

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

Dieser sagt Ihnen, ob Sie eine Bildlaufleiste haben oder nicht. Ich habe einige Informationen eingefügt, die beim Debuggen hilfreich sein können und als JavaScript-Warnung angezeigt werden.

Fügen Sie dies nach dem schließenden Body-Tag in ein Skript-Tag ein.

Ich habe eine aktualisierte Version von Kees C. Bakkers Antwort geschrieben:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

Die Funktion gibt true oder false zurück, je nachdem, ob die Seite eine vertikale Bildlaufleiste hat oder nicht.

Beispielsweise:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

ich benutze

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

Vergleichen Sie einfach die Breite des Dokumentenstammelements (dh des HTML-Elements) mit dem inneren Teil des Fensters:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

Wenn Sie auch die Breite der Bildlaufleiste kennen müssen:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

Andere Lösungen haben in einem meiner Projekte nicht funktioniert und ich habe am Ende die Überlauf-CSS-Eigenschaft überprüft

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

Es funktioniert jedoch nur, wenn die Bildlaufleiste durch Ändern der Requisite ausgeblendet wird. Es funktioniert nicht, wenn der Inhalt gleich oder kleiner als das Fenster ist.