检查元素是否滚动到水平视图 50%

Question

我有水平可滚动的 div，其中包含列表（li）元素。 如何检查特定列表元素是否滚动到水平视图中至少 50%？

Answer 1

您可以使用要观看的父项和子项的 offsetLeft、clientWidth 和 scrollLeft。

 elementToMonitor.parentNode.addEventListener("scroll", function(event) { const visible = this.scrollLeft + this.clientWidth, isStartVisible = visible >= elementToMonitor.offsetLeft + (elementToMonitor.clientWidth / 2), isEndVisible = visible <= elementToMonitor.offsetLeft + this.clientWidth + (elementToMonitor.clientWidth / 2); // if both are true, item is visible relative to scroll position // this does not mean, it is visible in the viewport if (isStartVisible && isEndVisible) { elementToMonitor.setAttribute("style", `color: white; background-color: purple; border: 5px solid green; border-radius: 1em;`); } else { elementToMonitor.removeAttribute("style"); } });

 div { overflow: auto; white-space: nowrap; } span { display: inline-block; border: 1px solid black; margin-right: 0.5em; }.spacer { width: 100vw; }.spacer::before { content: "Placeholder"; }

 <div> <span class="spacer"></span> <span id="elementToMonitor">Make me purple!</span> <span class="spacer"></span> </div>