Welche Eigenschaften muss JS haben, um festzustellen, ob auf der Seite eine Bildlaufleiste vorhanden ist?

Dieses Mal zeige ich Ihnen, welche Attribute von JS verwendet werden können, um festzustellen, ob auf der Seite eine Bildlaufleiste vorhanden ist, und welche Vorsichtsmaßnahmen es gibt, damit JS ermittelt, ob eine Bildlaufleiste vorhanden ist Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Vorwort

Vor kurzem habe ich beim Schreiben eines Plug-Ins mithilfe von JS festgestellt, ob eine Bildlaufleiste vorhanden ist dass die Methoden grundsätzlich gleich sind, aber alle etwas ausführlich sind. Der Code ist nicht prägnant genug. Schließlich habe ich unter Bezugnahme auf verschiedene Methoden eine relativ einfache Methode geschrieben. Bei der Beurteilung der Bildlaufleiste müssen Sie auch die Breite der Bildlaufleiste berechnen. Ich werde sie Ihnen in diesem Artikel mitteilen.

Warum sollten wir die Bildlaufleiste beurteilen?

Die Notwendigkeit, die Bildlaufleiste zu beurteilen, wird häufig in Popup-Fenster-Plug-Ins verwendet, da die meisten Pop-up-Fenster verwendet werden -up Windows fügt das Attribut <a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow<code><a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow</a>: hidden : versteckt hinzu, wenn die Seite Ist relativ lang, fügen Sie dieses Attribut hinzu. Die Seite wird wackeln.

Um das Benutzererlebnis zu verbessern, fügen Sie <a href="//m.sbmmt.com/wiki/937.html" target="_blank">Marge hinzu, indem Sie feststellen, ob dort ist eine Bildlaufleiste. -left<code><a href="//m.sbmmt.com/wiki/937.html" target="_blank">margin-left</a> Attribut zum Versetzen der Bildlaufleistenposition nach overflow: hidden .

So ermitteln Sie, ob eine Bildlaufleiste vorhanden ist

Tatsächlich ist nur eine Zeile JS erforderlich. Der Test ist mit IE7 kompatibel

function hasScrollbar() {
  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

Im Allgemeinen verwenden Sie document.body.scrollHeight > window.innerHeight 

window.innerHeight . Um also mit IE7 und IE8 kompatibel zu sein, müssen Sie das Attribut underfined verwenden, um die Fensterhöhe zu berechnen. document.documentElement.clientHeight 

Die Methode zur Berechnung der Breite der Bildlaufleiste

-Wert hinzu. margin-left

und Erhalten Sie, ich werde aus der Methode lernen in offsetWidth clientWidth

function getScrollbarWidth() {
  var scrollp = document.createElement("p");
  scrollp.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
  document.body.appendChild(scrollp);
  var scrollbarWidth = scrollp.offsetWidth - scrollp.clientWidth;
  document.body.removeChild(scrollp);
  return scrollbarWidth;
}

Es ist vielleicht nicht schwierig, eine Funktion mit JS zu implementieren, aber als Programmierer Sie sollten immer darüber nachdenken, wie Sie diese Funktion einfacher und eleganter implementieren können, und sich immer auf die Verbesserung der Benutzererfahrung konzentrieren. Für

erfordern vielleicht zehn Zeilen logischer Beurteilung nur eine Zeile. Ich war in letzter Zeit zutiefst beeindruckt und muss gut darin sein, ternäre Ausdrücke anstelle von zu verwenden Optimieren Sie den Code. if..else Das Prinzip besteht darin, zu beurteilen, ob die Höhe des Dokuments größer ist als die Höhe des

. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonWelche Eigenschaften muss JS haben, um festzustellen, ob auf der Seite eine Bildlaufleiste vorhanden ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!