CSS Scroll Snap 获取活动项目

Question

我对CSS 滚动捕捉有疑问。我想通过 JavaScript 检测捕捉的元素并分配它，例如 CSS 类或类似的。

\n

不幸的是，我还没有找到检测捕捉元素的方法。背景：我有一个包含子项目的列表，这些子项目是滚动的，列表中的中间项目始终应突出显示：

\n

布局

\n

\n

我已经用 rootMargin 测试了交叉观察器来检测垂直居中的元素，但它\xe2\x80\x99 的错误多于有用。

\n

超文本标记语言

\n

<div class="timeline-menu-dropdown-years-list-container">\n    <ul class="timeline-menu-dropdown-years-list timeline-menu-dropdown-years-text" id="yearcontainer">\n        <li id="2010" class="timeline-dropdown-year" data-target="year-2010">2010</li>\n        <li id="2009" class="timeline-dropdown-year" data-target="year-2009">2009</li>\n        <li id="2008" class="timeline-dropdown-year" data-target="year-2008">2008</li>\n        <li id="2007" class="timeline-dropdown-year" data-target="year-2007">2007</li>\n        <li id="2006" class="timeline-dropdown-year" data-target="year-2006">2006</li>\n        <li id="2005" class="timeline-dropdown-year" data-target="year-2005">2005</li>\n        <li id="2004" class="timeline-dropdown-year" data-target="year-2004">2004</li>\n        <li id="2003" class="timeline-dropdown-year" data-target="year-2003">2003</li>\n        <li id="2002" class="timeline-dropdown-year" data-target="year-2002">2002</li>\n        <li id="2001" class="timeline-dropdown-year" data-target="year-2001">2001</li>\n        <li id="2000" class="timeline-dropdown-year" data-target="year-2000">2000</li>\n    </ul>\n</div>\n

\n

CSS

\n

.timeline-menu-dropdown-years-list-container {\n  max-height: 250px;\n  overflow: scroll;\n  scroll-snap-type: y mandatory;\n  -ms-overflow-style: none;  /* Internet Explorer and Edge */\n  scrollbar-width: none;  /* Firefox */\n  padding-top: 45%;\n  padding-bottom: 40%;\n  scroll-padding-top: 45%;\n  scroll-padding-bottom: 40%;\n}\n\n.timeline-dropdown-year {\n  color: white;\n  font-size: 14px;\n  border-bottom: 2px solid white;\n  margin-right: 11%;\n  margin-left: 34%;\n  scroll-snap-align: center;\n}\n

\n

我该如何修复它？

\n

最后，您应该能够滚动浏览此时间线。活动元素应始终捕捉到中心并在视觉上突出显示。

\n

Answer 1

我也有同样的问题。我在这里用 JavaScript 解决了这个问题：Implementation of CSS scroll snap event stop and elementposition detector

[].slice.call(container.children).forEach(function (ele, index) {
    if (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) {
        // The 'ele' element at this moment is the element currently
        // positioned. Add class .active for example!

    } else {
        // The 'ele' element at the moment is not
        // the currently positioned element
    }
});

将其放入事件滚动中：

// Timer, used to detect whether horizontal scrolling is over
var timer = null;
// Scrolling event start
container.addEventListener('scroll', function () {
    clearTimeout(timer);
    // Renew timer
    timer = setTimeout(function () {
        // No scrolling event triggered. It is considered that
        // scrolling has stopped do what you want to do, such
        // as callback processing
    }, 100);
});