当元素不再适合容器时执行 JavaScript答案

【问题标题】：Execute JavaScript when elements doesn't fit container anymore当元素不再适合容器时执行 JavaScript
【发布时间】：2015-05-06 17:06:12
【问题描述】：

我正在创建一个响应式的 Web 应用程序。为了更加形象化，我目前正在重新创建 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 元素都不适合容器的宽度，则下一个元素会被向下推。我知道这可以通过溢出和空白来解决，但这不是这里的问题。

只有当 6 个 LI 元素不再适合其容器时，我才需要一个 JavaScript 函数来执行一个函数。

这里有一个fiddle 试试看。

希望有人能给我一些指导。

【问题讨论】：

希望您可能需要了解更多有关响应式网站的信息
如果 6 个
项具有固定的已知宽度，如果窗口宽度小于 6 个选项卡的宽度之和，则可以触发调整大小的功能。

【解决方案1】：

使用媒体查询：使用JS测量<li>s并生成媒体查询：

https://jsfiddle.net/hhtjrL59/3/

width = null

$(document).ready(function() {
    $("li").each(function(idx, li) {
        width += $(li).width()
    });

});

document.querySelector('style').textContent +=
     "@media screen and (max-width:" + width + "px) { #holder { background-color: red; }}"

处理这个 HTML：

<ul id="holder">
    <li>Tab 1 f</li>
    <li>Tab 2 ghe</li>
    <li>Tab 3 fds</li>
    <li>Tab 4 wr</li>
    <li>Tab 5 wer3</li>
    <li>Tab 6 3r</li>
<ul>

【讨论】：

【解决方案2】：

一个非常简单的版本：在页面加载时获取<ul>元素的总宽度，将其保存到一个变量中，然后在页面调整大小时进行比较：

w = $('ul').width();

$(window).on('resize', function(e) {
  var newW = $(window).width();
  if (newW <= w) {
    alert('code time');
  }
});

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
li {
  display: inline-block;
  min-width: 100px;
  border: 1px solid #d4d4d4;
}

<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 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
  <ul>

【讨论】：

【解决方案3】：

您可以通过检查列表的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>

【讨论】：

【解决方案4】：

(function ($) {
    $(window).on('resize', function(e) {
        var window_width = $(window).width();
        var tabsWidth = 0;
        $('li').each(function() {
           tabsWidth += $(this).width()*1;
        });

        if (tabsWidth > window_width) {
         // alert('do something');           
        }
    });
}(jQuery));

检查小提琴https://jsfiddle.net/hhtjrL59/1/

【讨论】：