Juara semak jika tatal mendatar hadir

Fungsi yang menggunakan jQuery untuk mengesan sama ada terdapat bar skrol mendatar dalam elemen

(dan fungsi pengesanan bar tatal menegak). hasHScrollBar()

function fungsi hasHScrollBar()

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

Fungsi yang sama:

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

Versi lain:

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

Soalan -soalan yang sering ditanya mengenai jQuery dan bar tatal mendatar (FAQ)

Bagaimana menggunakan jQuery untuk memeriksa sama ada terdapat bar tatal mendatar?

Gunakan jQuery untuk memeriksa sama ada terdapat bar tatal mendatar, anda boleh menggunakan harta

. Harta ini mengembalikan jumlah lebar elemen dalam piksel, termasuk mengisi, sempadan, dan bar tatal. Jika scrollWidth lebih besar daripada scrollWidth, bar skrol mendatar wujud. Berikut adalah coretan kod mudah: clientWidth

Apakah perbezaan antara

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

dan scrollWidth? clientWidth Sifat -sifat

mengembalikan jumlah lebar elemen dalam piksel, termasuk padding, sempadan, dan bar tatal. Sebaliknya, scrollWidth mengembalikan lebar elemen yang kelihatan dalam piksel, termasuk padding, tetapi bukan sempadan, bar skrol, atau margin. clientWidth

Bolehkah saya menggunakan jQuery untuk memeriksa sama ada terdapat bar skrol menegak?

Ya, anda boleh menggunakan kaedah yang sama untuk memeriksa bar skrol menegak. Anda perlu membandingkan

dan scrollHeight bukan clientHeight dan scrollWidth. clientWidth

Bagaimana menggunakan jQuery untuk menyembunyikan bar skrol mendatar?

anda boleh menyembunyikan bar skrol mendatar dengan menetapkan harta

ke css() menggunakan kaedah overflow dalam jQuery. Berikut adalah coretan kod mudah: 'hidden'

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

Bagaimana memaksa memaparkan bar tatal mendatar?

Anda boleh memaksa bar tatal mendatar untuk dipaparkan dengan menetapkan atribut

ke css() menggunakan kaedah overflow dalam jQuery. Berikut adalah coretan kod mudah: 'scroll'

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

Selebihnya FAQ adalah serupa dengan yang di atas, hanya menggantikan bar skrol mendatar dengan bar skrol menegak, atau beroperasi pada elemen tertentu. Untuk mengelakkan pertindihan, saya tidak akan mengulanginya di sini. Semua masalah boleh diselesaikan dengan menggunakan sifat

/scrollWidth dan scrollHeight/clientWidth dan kaedah clientHeight jQuery. css()

Atas ialah kandungan terperinci Juara semak jika tatal mendatar hadir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!