ความกว้างของแถบเลื่อนใน JavaScript

ความกว้างของแถบเลื่อนขึ้นอยู่กับเบราว์เซอร์ เราสามารถรับค่าของความกว้างนี้ได้ เพื่อทำสิ่งนี้ เราจะสร้างองค์ประกอบที่มีการเลื่อน แต่ไม่มีขอบและไม่มีช่องว่างภายใน:

let div = document.createElement('div');

เพิ่มสไตล์บางอย่างให้กับมัน:

div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';

แทรกองค์ประกอบลงในเอกสาร มิฉะนั้นขนาดของมันจะเท่ากับศูนย์:

document.body.append(div);

รับขนาดของแถบเลื่อน:

let scrollWidth = div.offsetWidth - div.clientWidth;

ลบองค์ประกอบ:

div.remove();

มีปุ่มให้ เมื่อกดปุ่ม ให้รับความกว้างของแถบเลื่อน ในเบราว์เซอร์ของคุณ