So ermitteln Sie mithilfe von JS, ob die aktuelle Seite über Bildlaufleisten verfügt

Dieses Mal zeige ich Ihnen, wie Sie mit JS feststellen, ob die aktuelle Seite über eine Bildlaufleiste verfügt. Was sind die Vorsichtsmaßnahmen für die Verwendung von JS, um festzustellen, ob die aktuelle Seite über eine Bildlaufleiste verfügt? ist ein praktischer Fall.

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, die ich Ihnen in diesem Artikel mitteilen werde.

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="http://www.php.cn/wiki/923.html" target="_blank">overflow<code><a href="http://www.php.cn/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="http://www.php.cn/wiki/937.html" target="_blank">Marge hinzu, indem Sie feststellen, ob dort ist eine Bildlaufleiste. -left<code><a href="http://www.php.cn/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 kann die Verwendung document.body.scrollHeight > window.innerHeight 

Aber in IE7 und IE8 ist

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

Nehmen Sie auch das Popup-Fenster als Beispiel, da die Bildlaufleisten von IE 10 und höher und mobil sind Browser belegen nicht den transparenten Stil der Seitenbreite (Browser ab IE 10 können den ursprünglichen Bildlaufleistenstil über CSS-Eigenschaften wiederherstellen). Um das Benutzererlebnis weiter zu verbessern, müssen wir daher auch die Breite der Bildlaufleiste berechnen und hinzufügen ein angemessener

Wert je nach Situation. margin-left

Die Methode zur Berechnung der Bildlaufleistenbreite ist relativ einfach. Erstellen Sie ein neues p-Element mit einer Bildlaufleiste und verwenden Sie den Unterschied zwischen

und offsetWidth des Elements Erhalten, ich werde aus der Methode in clientWidth Magnific-popup

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;
}

lernen. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Interaktionsschritte zwischen Ajax() und dem Hintergrund

Verwendung Ajax in Django

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie mithilfe von JS, ob die aktuelle Seite über Bildlaufleisten verfügt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!