Javascript ul列表中的第一个和最后一个可见元素

我有一个可滚动的项目列表，我想从中检测（

ul li

）列表中可见的

第一个
和
最后一个
项目

代码：


ul{
列表样式类型：无；
宽度：400px；
高度：70像素；
溢出-x：滚动；
保证金：0；
填充：0；
溢出：自动；
空白：nowrap；
}
ulli{
/*浮动：左*/
显示：内联块；
宽度：35px；
保证金：3倍；
高度：35px；
边框：1px纯红；
空白：预包装；
填充物：5px；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目12
项目11
项目12
项目13
项目14
项目15
项目16
项目列表：

<li id="first">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li id="last">Item 5</li>

您可以像这样分别拥有第一个和最后一个元素

document.getElementsByTagName('ul')[0].firstElementChild.innerHTML
document.getElementsByTagName('ul')[0].lastElementChild.innerHTML

现在更清楚了（感谢更新），您必须计算隐藏元素的数量，例如：

var contentSize = 0;
for(var i = 0; contentSize < document.querySelector('ul').scrollLeft; i++)
{
    contentSize += document.querySelector('ul li')[i].getBoundingClientRect().width + 6;
}

var contentSize=0；
for（var i=0；contentSize

第一个完全可见的是索引i。不清楚您是希望第一个完全可见还是第一个显示

当然，您需要将选择器更改为仅针对正确的元素

+6表示li的边距，但可能会再次微调。
试试这个。
//https://stackoverflow.com/a/41698614/17447
功能可见（elem）{
if（！（elem instanceof Element））抛出错误（'DomUtil:elem不是元素'）；
常量样式=getComputedStyle（elem）；
如果（style.display=='none'）返回false；
if（style.visibility！==“visible”）返回false；
if（style.opacity<0.1）返回false；
如果（元素偏移网络宽度+元素偏移视线+元素getBoundingClientRect（）高度+
elem.getBoundingClientRect（）.width==0）{
返回false；
}
常量elemCenter={
x:elem.getBoundingClientRect（）.left+elem.offsetWidth/2，
y:elem.getBoundingClientRect（）.top+elem.offsetHeight/2
};
if（elemCenter.x<0）返回false；
if（elemCenter.x>（document.documentElement.clientWidth | | window.innerWidth））返回false；
如果（elemCenter.y<0）返回false；
if（elemCenter.y>（document.documentElement.clientHeight | | window.innerHeight））返回false；
设pointContainer=document.elementFromPoint（elemCenter.x，elemCenter.y）；
做{
if（pointContainer==elem）返回true；
}while（pointContainer=pointContainer.parentNode）；
返回false；
}
document.querySelector（“#获取可见项”）
.addEventListener（'click'，evt=>{
const elmList=document.queryselectoral（“#items li”）；
让first=last=-1；
for（设i=0；i
ul{
列表样式类型：无；
宽度：400px；
高度：70像素；
溢出-x：滚动；
保证金：0；
填充：0；
溢出：自动；
空白：nowrap；
}
ulli{
/*浮动：左*/
显示：内联块；
宽度：35px；
保证金：3倍；
高度：35px；
边框：1px纯红；
空白：预包装；
填充物：5px；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目12
项目11
项目12
项目13
项目14
项目15
项目16

获取可见项
您的意思是，滚动视图中的第一项和最后一项？您可以使用id作为第一项和最后一项li标记，然后使用js进行检测这是否回答了您的问题？当你说“检测”时，是为了什么目的？querySelector（'li:first child'）和querySelector（'li:last child'）将实现javascript的技巧。编辑-或者（不清楚），您想要ul列表中的第一个和最后一个可见元素？那么我猜你唯一的方法就是计算scrollLeft值并计算隐藏了多少元素，然后取下一个。你应该能够使用。您可以将其设置为每当列表的子项与可见部分相交时触发（或不再相交，这意味着它已被滚动出去）。@Govi Boy。我想检测显示列表中的第一项和最后一项。您的代码将导致整个列表中的第一项和最后一项。@SamiBan那么您可以对1,7,5,12项li标记使用ID吗？
var contentSize = 0;
for(var i = 0; contentSize < document.querySelector('ul').scrollLeft; i++)
{
    contentSize += document.querySelector('ul li')[i].getBoundingClientRect().width + 6;
}