快速判断元素是否有滚动条，内含实践技巧

2024-01-23 02:16:56

在网页开发中，我们经常会遇到需要判断元素是否有滚动条的情况，比如当元素内容过多时需要显示滚动条以方便用户查看，或者当元素具有可拖动特性时需要通过滚动条来控制元素的位置。

基本方法

判断元素是否有滚动条最基本的方法是检查元素的 scrollWidth 和 clientWidth 属性。如果 scrollWidth 大于 clientWidth，则说明元素的内容超出了可视区域，需要显示滚动条。

function hasScrollbar(element) {
  return element.scrollWidth > element.clientWidth;
}

overflow: hidden

但是，当元素指定了 overflow: hidden 时，是不会出现滚动条的，即使 scrollWidth 大于 clientWidth。因此，我们需要对元素是否应用了 overflow: hidden 进行判断。

function hasScrollbar(element) {
  if (getComputedStyle(element).overflow === 'hidden') {
    return false;
  }

  return element.scrollWidth > element.clientWidth;
}

外边距合并

需要注意的是，当容器产生外边距合并的时候，也是 ele.scrollWidth > ele.clientWidth。

<div style="margin: 10px;">
  <div style="width: 100px; height: 100px; overflow: hidden;"></div>
</div>

在这种情况下，我们需要先计算容器的 clientWidth，然后减去外边距才能得到准确的结果。

function hasScrollbar(element) {
  const computedStyle = getComputedStyle(element);

  if (computedStyle.overflow === 'hidden') {
    return false;
  }

  const marginLeft = parseInt(computedStyle.marginLeft, 10);
  const marginRight = parseInt(computedStyle.marginRight, 10);

  return element.scrollWidth > element.clientWidth - marginLeft - marginRight;
}