javascript - 如何判断 mac 显示滚动条设置是否始终打开

Question

Mac OS 在常规下提供了一个设置，您可以将显示滚动条设置为始终打开。当我这样做时，我遇到了额外滚动条的问题，我想通过添加一些边距来缓解。但如果此设置关闭并且滚动条被隐藏，这会导致间隙。

在 Chrome 上，我可以通过以下方式判断滚动条是否打开:

this.bodyWrapperRight[0].offsetHeight - this.tableRight[0].offsetHeight > 0

在这种情况下，我比较有溢出的容器宽度:滚动到内部元素的宽度。

但这似乎不适用于 Mac 上的 Firefox 或 Safari。我正在寻找某种方法来判断滚动条是否设置为始终可见？

Answer 1

我找到了基于此的解决方案 http://jsfiddle.net/UU9kg/17/获取滚动条宽度的代码:.

/**
 * Gets the OS scollbar width in pixels.
 * @returns {number} The width as a number in pixels.
 */
utils.getScrollbarWidth = function () {
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  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);

  return widthNoScroll - widthWithScroll;
};

这适用于 Mac、Safari、Chrome 和 Firefox。如果您运行 fiddle 页面并设置 mac 滚动条选项，如果滚动条始终可见，则现在将始终返回 15；如果自动隐藏，则始终返回 0。