JQUERY Vérifiez si un parchemin horizontal est présent

Fonctions qui utilisent jQuery pour détecter s'il existe une barre de défilement horizontale dans un élément hasHScrollBar() (et une fonction de détection de barre de défilement verticale).

jQuery hasHScrollBar() fonction

<code class="language-javascript">// 用于检查元素是否存在滚动条的实用程序函数
jQuery.fn.hasScrollBar = function(direction) {
  if (direction === 'vertical') {
    return this.get(0).scrollHeight > this.innerHeight();
  } else if (direction === 'horizontal') {
    return this.get(0).scrollWidth > this.innerWidth();
  }
  return false;
};

// $('#c3 .mbcontainercontent').hasScrollBar('horizontal');</code>

Fonction similaire:

<code class="language-javascript">// 用于检查元素是否存在水平滚动条的实用程序函数
jQuery.fn.hasHScrollBar = function() {
  return this.get(0).scrollWidth > this.innerWidth();
};
// $('#c3 .mbcontainercontent').hasHScrollBar();

// 用于检查元素是否存在垂直滚动条的实用程序函数
jQuery.fn.hasVScrollBar = function() {
  return this.get(0).scrollHeight > this.innerHeight();
};
// $('#c3 .mbcontainercontent').hasVScrollBar();</code>

Une autre version:

<code class="language-javascript">function hasScroll(el, direction) {
  direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
  let result = !!el[direction];

  if (!result) {
    el[direction] = 1;
    result = !!el[direction];
    el[direction] = 0;
  }
  return result;
}

// alert('vertical? ' + hasScroll(document.body, 'vertical'));
// alert('horizontal? ' + hasScroll(document.body, 'horizontal'));</code>

Des questions fréquemment posées sur JQuery et les barres de défilement horizontal (FAQ)

Comment utiliser jQuery pour vérifier s'il y a une barre de défilement horizontale?

Utilisez jQuery pour vérifier s'il y a une barre de défilement horizontale, vous pouvez utiliser la propriété scrollWidth. Cette propriété renvoie la largeur totale de l'élément dans les pixels, y compris les remplissages, les frontières et les barres de défilement. Si scrollWidth est supérieur à clientWidth, une barre de défilement horizontale existe. Voici un extrait de code simple:

<code class="language-javascript">if (document.documentElement.scrollWidth > document.documentElement.clientWidth) {
  // 存在水平滚动条
}</code>

Quelle est la différence entre

scrollWidth et clientWidth?

scrollWidth Les propriétés renvoient la largeur totale de l'élément dans les pixels, y compris le rembourrage, les bordures et les barres de défilement. D'un autre côté, clientWidth renvoie la largeur visible d'un élément dans les pixels, y compris le rembourrage, mais pas les bordures, les barres de défilement ou les marges.

Puis-je utiliser jQuery pour vérifier s'il y a une barre de défilement verticale?

Oui, vous pouvez utiliser une méthode similaire pour vérifier la barre de défilement verticale. Vous devez comparer scrollHeight et clientHeight au lieu de scrollWidth et clientWidth.

Comment utiliser jQuery pour masquer les barres de défilement horizontales?

Vous pouvez masquer la barre de défilement horizontale en définissant la propriété css() sur overflow en utilisant la méthode 'hidden' dans jQuery. Voici un extrait de code simple:

<code class="language-javascript">$("body").css("overflow-x", "hidden");</code>

Comment forcer l'affichage des barres de défilement horizontales?

Vous pouvez forcer la barre de défilement horizontale à afficher en définissant l'attribut css() à overflow en utilisant la méthode 'scroll' dans jQuery. Voici un extrait de code simple:

<code class="language-javascript">$("body").css("overflow-x", "scroll");</code>

Le reste de la FAQ est similaire à ce qui précède, en remplaçant simplement la barre de défilement horizontale par une barre de défilement verticale ou en fonctionnant sur un élément spécifique. Pour éviter la duplication, je ne le répéterai pas ici. Tous les problèmes peuvent être résolus en utilisant les propriétés scrollWidth / scrollHeight et clientWidth / clientHeight et la méthode css() de jQuery.

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!