Barre de défilement de la page de capture JS

Cette fois, je vais vous apporter JS pour capturer la barre de défilement de la page. Quelles sont les précautions pour que JS capture la barre de défilement de la page. Voici un cas pratique, jetons un oeil.

Dans le processus d'écriture d'un plug-in récemment, 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 l'est. pas assez concis. 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. Lorsque vous jugez la barre de défilement, vous devez également calculer la largeur de la barre de défilement. Je la 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 <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  : caché , si la page est relativement long, ajoutez cet attribut La page va trembler.

Afin d'améliorer l'expérience utilisateur, ajoutez une <a href="http://www.php.cn/wiki/937.html" target="_blank">marge en déterminant s'il y a est un attribut de barre de défilement. -left<code><a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a> pour décaler la position de la barre de défilement après overflow: hidden .

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

En général, l'utilisation document.body.scrollHeight > window.innerHeight  peut être jugée.

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 . Obtenez, 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;
}

Résumé

Il n'est peut-être pas difficile d'implémenter une fonction en utilisant JS, mais en tant que programmeur vous devez toujours réfléchir à la manière de mettre en œuvre cette fonction de manière plus simple et plus élégante, et toujours continuer à améliorer l'expérience utilisateur comme principe. Pour le jugement conditionnel , peut-être dix lignes de jugement logique n'ont besoin que d'une seule ligne. J'ai été profondément impressionné récemment, et je dois être doué pour utiliser des expressions ternaires au lieu de if..else pour. rationaliser le code.

Le principe est de juger si la hauteur du document est supérieure à la hauteur de la zone visuelle.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des trois types de $() dans jQuery

Comment choisir le jQuery version

Résumé des astuces dans la conception H5

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!