Bildlaufleiste der JS-Erfassungsseite

Dieses Mal bringe ich Ihnen JS zum Erfassen der Seiten-Bildlaufleiste. Was sind die Vorsichtsmaßnahmen für JS zum Erfassen der Seiten-Bildlaufleiste?

Während ich kürzlich ein Plug-In schreibe, muss ich JS verwenden, um festzustellen, ob eine Bildlaufleiste vorhanden ist. Nach der Suche sind die allgemeinen Methoden ähnlich, aber sie sind etwas ausführlich und der Code ist nicht prägnant genug. Schließlich habe ich unter Bezugnahme auf verschiedene Methoden eine relativ einfache Methode geschrieben

Vorwort

Während ich kürzlich ein Plug-In schreibe, muss ich JS verwenden Stellen Sie fest, ob eine Bildlaufleiste vorhanden ist. Nach einer Weile sind die allgemeinen Methoden ähnlich, aber sie sind etwas ausführlich und 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="//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 kann die Verwendung 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 je nach Situation. margin-left

und offsetWidth des Elements Erhalten Sie, ich werde aus der Methode lernen 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;
}

Zusammenfassung

bedingte Beurteilung 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

visuellen Bereichs.

Detaillierte Erklärung der drei Arten von $() in jQuery

So wählen Sie jQuery aus Version

Zusammenfassung der Tipps zum H5-Design

Das obige ist der detaillierte Inhalt vonBildlaufleiste der JS-Erfassungsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!