时间戳

首页 > 解决方案 > 检查元素是否滚动到水平视图 50%

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

问题描述

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

标签： javascriptjquerybrowser

解决方案

您可以使用要观看的父项和子项的 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>

推荐阅读