javascript - 我该如何判断Mac Show滚动条设置是否始终处于打开状态

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

在chrome上，我可以确定滚动条是否打开：

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

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

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

最佳答案

我找到了基于此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。如果您运行小提琴页面并设置mac滚动条选项，则如果滚动条始终可见，它将始终返回15；如果自动隐藏，则它将始终返回0。