javascript - 当元素不再适合容器时执行 JavaScript

Question

我正在创建一个应该响应的网络应用程序。为了更直观地展示它，我目前正在重新创建 Microsoft 在其产品中使用的 OfficeUI 功能区，然后再用于 Web 应用程序。

在功能区中，当屏幕上显示所有选项卡时，您会看到如下内容:

现在，当您调整窗口大小时使所有选项卡不再可见时，您会看到以下内容:

您可以清楚地看到区别，它是右侧的一个按钮，用于导航所有不同的选项卡。

现在，该按钮将始终放置在网站上，但只是隐藏起来，通过一些 JavaScript 函数，我将使它可见。

但是现在，我需要知道我需要在什么时候使按钮可见。

假设以下简单的无序列表:

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
<ul>

所有 LI 元素彼此相邻放置，就像在提供的图像中一样，如果我将窗口大小调整为所有 LI 元素不适合容器的宽度，那么下一个元素将被向下推。我知道这可以通过溢出和空白来解决，但这不是这里的问题。

我需要一个 JavaScript 函数来仅在 6 个 LI 元素不再适合它们的容器时执行一个函数。

这是一个 fiddle试一试。

希望有高人指点一下。

Answer 1

您可以通过检查列表的 scrollWidth 是否大于其 offsetWidth 来测试这一点。

参见 https://jsfiddle.net/maryisdead/bfrzuaoy/或下面的示例(在整页模式下测试)。

(function ($)
{
    var list = $('ul')[0];
    
    $(window).on('resize', function(e)
    {
        if (list.offsetWidth < list.scrollWidth)
        {
           $('p').text('items hidden');
        }
        else
        {
            $('p').text('all items visible');
        }
    });
}(jQuery));

ul
{
    border: 1px solid;
    margin: 0px;
    list-style: none;
    overflow: hidden;
    padding: 0px;
    white-space: nowrap;
}

li
{
    border: 1px solid #d4d4d4;
    display: inline-block; 
    min-width: 100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
    <li>Tab 6</li>
</ul>
<p></p>