Bagaimana untuk Mendapatkan Dimensi Bar Skrol Penyemak Imbas Menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk Mendapatkan Dimensi Bar Skrol Penyemak Imbas Menggunakan JavaScript?

Patricia Arquette

Lepaskan： 2024-11-28 17:33:19

asal

872 orang telah melayarinya

How to Get Browser Scrollbar Dimensions Using JavaScript?

Mendapatkan Dimensi Bar Tatal Penyemak Imbas dalam JavaScript

Dalam pembangunan web, menentukan dimensi bar skrol boleh menjadi penting untuk tujuan estetik dan fungsi. JavaScript menyediakan cara serba boleh untuk mendapatkan maklumat ini, membenarkan pembangun melaraskan elemen UI dan meningkatkan pengalaman pengguna.

Menentukan Ketinggian Bar Skrol Mendatar

Untuk mendapatkan ketinggian mendatar bar skrol, JavaScript menggunakan pelbagai rupa pendekatan:

function getHorizontalScrollbarHeight() {
  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);

  document.body.appendChild(outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild(outer);

  return (w1 - w2);
}

Salin selepas log masuk

Menentukan Lebar Bar Tatal Menegak

Begitu juga, untuk bar skrol menegak, kod JavaScript di bawah menawarkan penyelesaian yang boleh dipercayai:

function getVerticalScrollbarWidth() {
  var inner = document.createElement('p');
  inner.style.height = "100%";
  inner.style.width = "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 = "150px";
  outer.style.height = "200px";
  outer.style.overflow = "hidden";
  outer.appendChild(inner);

  document.body.appendChild(outer);
  var w1 = inner.offsetHeight;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetHeight;
  if (w1 == w2) w2 = outer.clientHeight;

  document.body.removeChild(outer);

  return (w1 - w2);
}

Salin selepas log masuk

Dengan memanfaatkan fungsi JavaScript ini, pembangun boleh mendapatkan semula dimensi bar skrol penyemak imbas dengan tepat, membolehkan kawalan tepat ke atas reka bentuk dan fungsi UI.

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