ul列表中的第一个和最后一个VISIBLE元素

用户13992723:

我有我要检测的项目的滚动列表firstlast项目中(ul li)列表是可见的

代码:

ul {
  list-style-type: none;
  width: 400px;
  height: 70px;
  overflow-x: scroll;
  margin: 0;
  padding: 0;
  overflow: auto;
  white-space: nowrap;
}

ul li {
  /* float: left; */
  display: inline-block;
  width: 35px;
  margin: 3px;
  height: 35px;
  border: 1px solid red;
  white-space: pre-wrap;
  padding: 5px;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 12</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

例如

在这里,第一个是Item1,最后一个是Item7

在此处输入图片说明

在这里,第一个是Item5,最后一个是Item12

在此处输入图片说明

注意:我必须只使用Javascript

naveen:

试试这个。

// https://stackoverflow.com/a/41698614/17447
function isVisible(elem) {
  if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
  const style = getComputedStyle(elem);
  if (style.display === 'none') return false;
  if (style.visibility !== 'visible') return false;
  if (style.opacity < 0.1) return false;
  if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
    elem.getBoundingClientRect().width === 0) {
    return false;
  }
  const elemCenter = {
    x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
    y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
  };
  if (elemCenter.x < 0) return false;
  if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
  if (elemCenter.y < 0) return false;
  if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
  let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
  do {
    if (pointContainer === elem) return true;
  } while (pointContainer = pointContainer.parentNode);
  return false;
}

document.querySelector('#get-visible-item')
  .addEventListener('click', evt => {
    const elmList = document.querySelectorAll('#items li');
    let first = last = -1;
    for (let i = 0; i < elmList.length; i++) {
      const elm = elmList[i];
      if (first !== -1 && !isVisible(elm)) {
        last = i - 1;
        break;
      }
      if (first === -1 && isVisible(elm)) {
        first = i;
      }
      if (i === elmList.length - 1) {
        last = i;
      }
    }
    console.clear();
    console.log(elmList[first]);
    console.log(elmList[last]);
  });
ul {
  list-style-type: none;
  width: 400px;
  height: 70px;
  overflow-x: scroll;
  margin: 0;
  padding: 0;
  overflow: auto;
  white-space: nowrap;
}

ul li {
  /* float: left; */
  display: inline-block;
  width: 35px;
  margin: 3px;
  height: 35px;
  border: 1px solid red;
  white-space: pre-wrap;
  padding: 5px;
}
<ul id="items">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 12</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>
<button id="get-visible-item">Get Visible Item</button>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

列表中连续对的和,包括最后一个元素与第一个元素的和

Java列表处理第一个和最后一个元素

使用递归查找列表的第一个和最后一个元素

列表OCaml的第一个和最后一个元素

对链接列表的第一个和最后一个元素的困惑

如果第一个和最后一个元素相等,则完整列表

Python切片列表中的第一个和最后一个元素

链接列表:查询存储在SQL表中的链表的第一个和最后一个元素

在Python列表中查找元素的第一个和最后一个出现的最佳方法是什么?

C-交换单链列表中的第一个和最后一个元素

R:识别重复组中的第一个和最后一个元素

删除数组中的第一个和最后一个元素

NumPy数组中的第一个和最后一个元素

删除行中第一个和最后一个元素的填充

ngFor循环列表中的第一个和最后一个对象

在Python中是否可以在一个表达式中的第一个,内部和最后一个元素中拆分列表?

css flex ul,第一个和最后一个固定的li

迭代Python列表中的连续元素,以使最后一个元素与第一个元素结合

减少ndarray的第一个维度-保留第一个和最后一个元素

从嵌套列表的子列表中提取第一个和最后一个元素

如何从三个相同的元素中隐藏第一个和最后一个元素

用jQuery仅选择第一个ul中的最后一个li

交替打印最后一个元素和第一个元素(JavaScript)

保留数组的第一个索引元素和最后一个索引元素

获取列表之间第一个和最后一个公共元素的索引的最快方法

选择数组中N个均匀间隔的元素,包括第一个和最后一个

在列表的最后一个空间上拆分第一个元素

循环列表,好像最后一个元素在第一个之前

数组中除第一个和最后一个元素外的其他元素