Maison > Article > interface Web > Comment déterminer si la page comporte des barres de défilement via JS
Récemment, en train d'écrire un plug-in, j'ai besoin d'utiliser JS pour déterminer s'il existe une barre de défilement. Après la recherche, les méthodes générales sont similaires, mais elles sont un peu verbeuses et le code n'est pas concis. assez. Enfin, en me référant à différentes méthodes, j'ai écrit une méthode relativement simple
Préface
En train d'écrire un plug-in récemment, j'ai besoin d'utiliser JS pour déterminer s'il existe une barre de défilement. Rechercher Après un certain temps, les méthodes générales sont similaires, mais elles sont un peu verbeuses et le code n'est pas assez concis. Finalement, en me référant à différentes méthodes, j’ai écrit une méthode relativement simple. Tout en jugeant la barre de défilement, vous devez également calculer la largeur de la barre de défilement, que je partagerai avec vous à travers cet article.
Pourquoi devrions-nous juger la barre de défilement
La nécessité de juger la barre de défilement est souvent utilisée dans les plug-ins de fenêtres pop-up, car la plupart des pop-ups -up windows ajoutera l'attribut overflow: hidden
, si la page est relativement longue, la page tremblera après l'ajout de cet attribut.
Afin d'améliorer l'expérience utilisateur, l'attribut margin-left
est ajouté pour décaler la position de la barre de défilement après overflow: hidden
en déterminant s'il existe une barre de défilement.
Comment déterminer s'il y a une barre de défilement
En fait, cela ne nécessite qu'une seule ligne de JS Le test est compatible avec IE7
function hasScrollbar() { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); }
Dans des circonstances normales, vous pouvez utiliser document.body.scrollHeight
> window.innerHeight
pour juger.
Mais dans IE7 et IE8, window.innerHeight
est underfined
, donc pour être compatible avec IE7 et IE8, vous devez utiliser l'attribut document.documentElement.clientHeight
pour calculer la hauteur de la fenêtre.
La méthode de calcul de la largeur de la barre de défilement
Prenons également la fenêtre pop-up comme exemple, car les barres de défilement d'IE 10 et supérieur et mobile les navigateurs n'occupent pas la largeur de la page Style transparent (les navigateurs IE 10 et supérieurs peuvent restaurer le style de barre de défilement d'origine via les propriétés CSS), donc afin d'améliorer encore l'expérience utilisateur, nous devons également calculer la largeur de la barre de défilement et ajouter une valeur margin-left
raisonnable selon la situation.
La méthode de calcul de la largeur de la barre de défilement est relativement simple. Créez un nouvel élément p avec une barre de défilement et utilisez la différence entre les éléments offsetWidth
et clientWidth
. Obtenu, j'apprendrai de la méthode dans 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; }
Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde. à l'avenir.
Articles connexes :
Améliorer l'expérience de demande de liste ajax basée sur l'historique h5
Parlez brièvement des objets de base AJAX
Explication détaillée des exemples de méthodes de transmission de données ajax
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!