Question

我自己一直在玩这个代码几天了，在使用MDN和W3引用之后取得了一些进展，但仍然没有为我工作。

我有一个颜色列表，列表是60vh。每个列表项都是可翻转的。当在列表项上按下按钮时，类.flipped将添加到该列表项。

当我向下滚动列表时，当包含.flipped类的列表项已滚动到视图外时，我想要检查附加到颜色列表的滚动事件内部，但似乎无法理解。

到目前为止，我已将滚动事件附加到颜色列表中，在内部我处于循环所有项目的位置以使用.flipped类获取列表项但超出此范围之前丢失。

任何帮助将不胜感激。我试图这样做，以便如果用户翻转列表项并将其滚出视图，链接将出现在列表上方。按下此链接时，我希望它将翻转的项目滚动到视图中，就像书签一样。那部分我可以覆盖，但正如我说它的检测我遇到了麻烦。谢谢大家。

var color_list = document.getElementById('color-list');
var list_items = color_list.getElementsByClassName('color-list-item');
var flipped_item = undefined;

color_list.addEventListener('scroll', function() {
    for(var i = 0; i < list_items.length; i++) {

        if(list_items[i].classList.contains('flipped')) {
            flipped_item = list_items[i];
            // if flipped list item is scrolled past top of list ...

            // then do something...
        }
}
});

相关的css ......

ul.color-list {
    background-color: Black;
    width: 100%;
    height: 60vh;
    overflow-y: scroll;
    border: none;
    padding-left: 0;
}

li.color-list-item {
    background-color: Black;
    border: none;
    margin-top: 4px;
    border-left: 4px solid White;
    padding: 0 0 0 15px !important;
    height: 42px;
    width: 100%;
    line-height: 100%;
    position: relative;
    -webkit-transition: border .25s ease;
    transition: border .25s ease;
}

html只是一个ul元素，id =＆＃34; color-list＆＃34;高度为60vh。列表项是在页面加载时动态生成的。

<ul id="color-list">

</ul>

如何判断特定的li元素是否已滚过列表顶部

0 个答案: