JQuery überprüfen, ob horizontale Schriftrolle vorhanden ist

Funktionen, die JQuery verwenden, um festzustellen, ob sich in einem Element hasHScrollBar() (und vertikale Scroll -Staberkennungsfunktion) eine horizontale Bildlaufleiste befindet.

jQuery hasHScrollBar() Funktion

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

Ähnliche Funktion:

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

Eine andere 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>

Häufig gestellte Fragen zu JQuery und horizontalen Scroll -Stangen (FAQ)

Wie kann ich mit JQuery überprüfen, ob es eine horizontale Bildlaufleiste gibt?

Verwenden Sie JQuery, um zu überprüfen, ob eine horizontale Scroll -Leiste vorhanden ist. Sie können die Eigenschaft scrollWidth verwenden. Diese Eigenschaft gibt die Gesamtbreite des Elements in Pixeln zurück, einschließlich Füllungen, Grenzen und Scrollstangen. Wenn scrollWidth größer als clientWidth ist, gibt es eine horizontale Bildlaufleiste. Hier ist ein einfacher Code -Snippet:

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

Was ist der Unterschied zwischen

scrollWidth und clientWidth?

scrollWidth Eigenschaften geben die Gesamtbreite des Elements in Pixeln zurück, einschließlich Polsterung, Grenzen und Scrollstangen. Auf der anderen Seite gibt clientWidth die sichtbare Breite eines Elements in Pixeln zurück, einschließlich Polsterung, aber nicht Grenzen, Scrollstangen oder Rand.

Kann ich JQuery verwenden, um zu überprüfen, ob es eine vertikale Scrollbar gibt?

Ja, Sie können eine ähnliche Methode verwenden, um die vertikale Scrollbar zu überprüfen. Sie müssen scrollHeight und clientHeight statt scrollWidth und clientWidth vergleichen.

Wie kann ich JQuery verwenden, um horizontale Scrollbars auszublenden?

Sie können die horizontale Bildlaufleiste ausblenden, indem Sie die Eigenschaft css() in overflow mit der 'hidden' -Methode in jQuery auf

einstellen. Hier ist ein einfacher Code -Snippet:

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

Wie kann man horizontale Bildlaufleisten erzwingen?

css() Sie können die horizontale Bildlaufleiste zum Anzeigen erzwingen, indem Sie das Attribut overflow auf 'scroll' mit der

-Methode in JQuery einstellen. Hier ist ein einfacher Code -Snippet:

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

scrollWidth Der Rest der FAQ ähnelt dem oben, ersetzt einfach die horizontale Bildlaufleiste durch eine vertikale Bildlaufleiste oder arbeitet auf einem bestimmten Element. Um eine Duplikation zu vermeiden, werde ich sie hier nicht wiederholen. Alle Probleme können durch die Verwendung der Eigenschaften scrollHeight/clientWidth und clientHeight/css() und die

-Methode von JQuery gelöst werden.

Das obige ist der detaillierte Inhalt vonJQuery überprüfen, ob horizontale Schriftrolle vorhanden ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!