javascript スクロールバーの幅を取得する

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript スクロールバーの幅を取得する相关的知识,希望对你有一定的参考价值。

let _width = null;

export default class {

  /**
   * スクロールバーの幅
   *
   * @return {Number}
   */

  static get width() {
    if (_width !== null) { return _width; }

    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);
    _width = widthNoScroll - widthWithScroll;

    return _width;
  };

};

以上是关于javascript スクロールバーの幅を取得する的主要内容,如果未能解决你的问题,请参考以下文章

scss スクロールバーの非表示

javascript ページトップへスクロールするボタン用のJS

テーブルコントロールTable Controls: スクロールを伴う場合の例

typescript 根から目标のスクロール量を计算する

css 横スクロールで背景が消えるのを回避する!

text モーダルを表示したときに背景部分はスクロールできないようにする