实现元素溢出实时检测并动态切换CSS类的方案

问题场景 #

需要实现仅当元素内容溢出时为其添加特定CSS类，现有代码仅在页面加载时判断是否溢出，无法在浏览器窗口缩放时实时更新状态。

初始代码（仅页面加载时生效） #

if ($(".quick-links").prop('scrollWidth') > $(".quick-links").width() ) {
  $( ".quick-links" ).addClass( "overflow" );
}

参考HTML结构 #

<div class="quick-links">
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
</div>

实时检测解决方案 #

通过监听浏览器窗口的resize事件，在窗口尺寸变化时重新判断元素是否溢出，并动态添加或移除overflow类：

$( window ).resize(function() {
  const $quickLinks = $(".quick-links");
  if ($quickLinks.prop('scrollWidth') > $quickLinks.width()) {
    $quickLinks.addClass( "overflow" );
  } else {
    $quickLinks.removeClass( "overflow" );
  }
});

优化提示（可选） #

resize事件会在窗口缩放时频繁触发，为避免性能问题，可添加防抖函数减少执行次数：

function debounce(func, delay = 100) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

$( window ).resize(debounce(function() {
  const $quickLinks = $(".quick-links");
  if ($quickLinks.prop('scrollWidth') > $quickLinks.width()) {
    $quickLinks.addClass( "overflow" );
  } else {
    $quickLinks.removeClass( "overflow" );
  }
}));

内容的提问来源于stack exchange，提问作者kdurkink