Bagaimanakah Saya Boleh Mendapatkan Dimensi Bar Skrol Penyemak Imbas Menggunakan JavaScript?

Mendapatkan Dimensi Bar Tatal Penyemak Imbas dalam JavaScript

Menentukan dimensi bar skrol dalam penyemak imbas adalah penting untuk mencipta halaman web dinamik. Artikel ini meneroka kaedah untuk menentukan ketinggian bar skrol mendatar dan lebar bar skrol menegak menggunakan JavaScript.

Penyelesaian:

Coretan kod yang disediakan di bawah mengira lebar bar skrol menegak menggunakan bijak teknik.

function getScrollBarWidth() {
  // Create elements to measure scrollbar size
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild(inner);

  // Add elements to the DOM
  document.body.appendChild(outer);

  // Calculate scrollbar width
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  // Remove elements from the DOM
  document.body.removeChild(outer);

  // Return scrollbar width
  return (w1 - w2);
}

Penjelasan:

Fungsi ini mencipta dua elemen, elemen dalam (dalam) dan elemen luar (luar). Elemen dalam mempunyai saiz tetap manakala elemen luar tidak mempunyai set sifat limpahannya. Perbezaan lebar antara elemen ini selepas mendayakan limpahan pada elemen luar mewakili lebar bar skrol menegak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Dimensi Bar Skrol Penyemak Imbas Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!