1. 程式人生 > >獲取瀏覽器原生滾動條寬度的方法

獲取瀏覽器原生滾動條寬度的方法

整體思路就是往body中插入一個div,div中再巢狀一個div,設定外部的div的overflower為scroll,

這樣就可以出現滾動條軌道,然後使用外部div寬度值減去內部div的寬度值即可了 。

得到滾動條寬度之後記得把新增的元素刪掉。

詳細如下程式碼

const getScrollBarWidth = () => {
  const outer = document.createElement("div");
  outer.style.visibility = "hidden";
  outer.style.width = "100px";
  outer.style.position = "absolute";
  outer.style.top = "-9999px";
  document.body.appendChild(outer);
  //
  const widthNoScroll = outer.offsetWidth;
  outer.style.overflow = "scroll";

  const inner = document.createElement("div");
  inner.style.width = "100%";
  outer.appendChild(inner);
  //
  const widthWithScroll = inner.offsetWidth;
  outer.parentNode.removeChild(outer);
  scrollBarWidth = widthNoScroll - widthWithScroll;
  return scrollBarWidth;
};