javascript - 确定 LI 是否溢出的函数

Question

JSFiddle:https://jsfiddle.net/1fLmtyoj/15/

我正在按照这个示例查看元素是否溢出，但有些东西不起作用，这是针对 DIV 的:Check with jquery if div has overflowing elements和 https://stackoverflow.com/a/7668692/1005607

我有一个 <LI>标签包含 <SPAN>秒。从上面的答案中，有必要检查 (1) Overflow active，(2) Semi-visible parts。我将它们组合成以下函数。

function isOverflowing(element) {

  // 1. Main Part for overflow check
  if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    return true;
   }  

  // 2. Partially invisible items
  var invisibleItems = [];
  for(var i=0; i<element.childElementCount; i++){
    if (element.children[i].offsetTop + element.children[i].offsetHeight >
        element.offsetTop + element.offsetHeight ||
        element.children[i].offsetLeft + element.children[i].offsetWidth >
        element.offsetLeft + element.offsetWidth ){

          invisibleItems.push(element.children[i]);
      }

  }

  if (invisibleItems.length) {
    return true;
  }
  // Otherwise, neither Part 1 nor 2, return FALSE
  return false;
}

在 JSFiddle 中，预期的输出是 #1 和 #3 没有溢出，但是 #2 和 #4 溢出了。但是所有 4 个都显示为没有溢出。

Answer 1

如果您要通过控制台显示元素，您会看到该元素没有属性 childElementCount —— 但元素数组的第一个成员有。因此，为所有属性引用 element[0]，它的行为符合预期。我认为这是由于您使用的选择器所致。

function isOverflowing(element) {

  // 1. Main Part for overflow check
  if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    return true;
   }  
  
  // 2. Partially invisible items
  var invisibleItems = [];
  for(var i=0; i<element[0].childElementCount; i++){

  if (element[0].children[i].offsetTop + element[0].children[i].offsetHeight >
        element[0].offsetTop + element[0].offsetHeight ||
        element[0].children[i].offsetLeft + element[0].children[i].offsetWidth >
        element[0].offsetLeft + element[0].offsetWidth ){

          invisibleItems.push(element[0].children[i]);
      }

  }
  
  if (invisibleItems.length) {
  	return true;
  }
  // Otherwise, neither Part 1 nor 2, return FALSE
  return false;
}

$('#result').html('#1? ' + isOverflowing($('li:eq(0)')) + 
       '#2? ' + isOverflowing($('li:eq(1)')) + 
       '#3? ' + isOverflowing($('li:eq(2)')) + 
       '#4? ' + isOverflowing($('li:eq(3)')) 
);

.type1 {
  border: 1px solid black;
  width: 130px;
  height: 30px;
  margin-bottom: 5px;
}

.type2 {
  border: 1px dotted red;
  width: 50px;
  height: 25px;
  margin-bottom: 45px;
}

.type3 {
  border: 1px dashed blue;
  width: 200px;
  height: 40px;
  margin-bottom: 5px;
}

.type4 {
  border: 1px dashed green;
  width: 100px;
  height: 10px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>

  <li class="type1"><span>Some text in LI 1</span></li>
  <li class="type2"><span>Some more text in LI 2</span></li>
  <li class="type3"><span>A long string of text in LI3</span></li>
  <li class="type4"><span>A much longer string of text in LI4</span></li>

</ul>

<br/>
<br/>
<br/>
<br/>
<p id="result"></p>

但是，如您所说，此解决方案不够通用——它不允许嵌套 DOM 节点。为了解决这个问题，我们需要一个递归函数。试试这个，可能。我认为它是有效的，但是递归思考确实让我的大脑受到伤害。 ;)

function isOverflowing(element) {
  /*******
   * This is going to be a recursive function -- first, 
   *   it'll check if there are children elements and,
   *   if not, simply return true. In the event there 
   *   are child elements, it should recurse over each
   *   to see if any child overflows, whether partially
   *   invis or not.
   ******/
  var elOverflows;
  var el = element[0];

  // On the first iteration, we initialize these. On every
  //  recursive iteration, we simply preserve them
  var mainHeight = el.offsetTop + el.offsetHeight,
    mainOffsetHeight = el.offsetHeight,
    mainWidth = el.offsetLeft + el.offsetWidth,
    mainOffsetWidth = el.offsetWidth;

  // 1. Main Part for overflow check
  if (mainOffsetHeight < el.scrollHeight ||
    mainOffsetWidth < el.scrollWidth) {
    elOverflows = true;
    return elOverflows;
  }

  /***
   *  2. If the current element doesn't contain any
   *     children, and the above check didn't return,
   *     then we don't have any overflow. 
   ***/
  if (el.childElementCount == 0) {
    elOverflows = false;
    return elOverflows;
  } else {
    // Here, we have child elements. We want to iterate
    //  over each of them and re-call isOverflowing() on
    //  each one. This is the recursion, allowing us to
    //  have any number of nested child elements.
    $(el.children).each(function() {
      elOverflows = isOverflowing($(this));
    });

    return elOverflows;

  }

}

$("#container li").each(function() {
  $("#result").append("<p>#" + $(this).index() + ": " + isOverflowing($(this)));
})

.type1 {
  border: 1px solid black;
  width: 130px;
  height: 30px;
  margin-bottom: 5px;
}

.type2 {
  border: 1px dotted red;
  width: 50px;
  height: 25px;
  margin-bottom: 45px;
}

.type3 {
  border: 1px dashed blue;
  width: 200px;
  height: 40px;
  margin-bottom: 5px;
}

.type4 {
  border: 1px dashed green;
  width: 100px;
  height: 10px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='container'>
  <li class="type1"><span>Some text in LI 1</span></li>
  <li class="type2"><span>Some more text in LI 2</span></li>
  <li class="type3"><span>A long string <span>containing A much longer string </span> in its center bit.</span>
  </li>
  <li class="type4"><span>A much longer string of text in LI4</span></li>

</ul>

<br/>
<br/>
<br/>
<br/>
<p id="result"></p>

我已经使 isOverflowing 递归了，对于当前节点的每个子节点，我只需再次重新调用它，直到不再有子节点为止。将返回值传递给初始调用允许我们查看是否有任何子节点超出了初始节点的边界。

希望这对您有所帮助!