JS bestimmt die Bildlaufleiste der Seite

Dieses Mal bringe ich Ihnen JS mit, um die Seiten-Bildlaufleiste zu beurteilen. Was sind die Vorsichtsmaßnahmen für JS, um die Seiten-Bildlaufleiste zu beurteilen? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

Ich habe kürzlich beim Schreiben eines Plug-Ins JS verwendet, um festzustellen, ob es eine Bildlaufleiste gibt Die Methoden sind im Grunde die gleichen, aber sie sind alle etwas ausführlich. Der Code ist nicht prägnant genug. Schließlich habe ich eine relativ einfache Methode geschrieben, indem ich mich auf verschiedene Methoden bezog. 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 overflow: hidden hinzu. Wenn die Seite relativ lang ist, wackelt die Seite nach dem Hinzufügen dieses Attributs.

Um das Benutzererlebnis zu verbessern, wird das Attribut margin-left hinzugefügt, um die Position der Bildlaufleiste nach overflow: hidden zu versetzen, indem bestimmt wird, ob eine Bildlaufleiste vorhanden ist.

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 eine bedingte Beurteilung, vielleicht zehn Zeilen logischer Beurteilung, ist in letzter Zeit möglicherweise nur eine Zeile erforderlich, und ich muss gut darin sein, ternäre Ausdrücke anstelle von

if..else 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 vonJS bestimmt die Bildlaufleiste der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!