聚焦和箭头滚动

Question

我正在建立一个包含很多动画的网站。因此，我所有的容器都位于绝对位置。

这将导致箭头完全消失。它在每个div的结尾处阻塞。我的目标是仅使用箭头转到下一个div。

我正在尝试找到一种解决方案，当用户滚动到div的末尾时，该div将失去焦点并将其分配给下一个div。

像这样，如果用户在页面加载时使用箭头，则第一个div（我们称其为“ div-1”）将具有焦点，并且箭头将移动此“ div-1”的滚动。

但是在滚动“ div-1”结束时到达。重点将放在下一个div（我们将其称为“ div-2”）。因此，用户可以继续使用箭头进行导航，而无需使用鼠标。现在，箭头将自动滚动“ div-2”。

问题是聚焦功能无法完成工作，或者我可能不好用。

以下是提供我尝试操作示例的代码段。

$(".div-1").on("scroll", function (event) {
  var eventTarget = event.target;
  var scrollTop = $(eventTarget).scrollTop();
  var elementHight = $(eventTarget).height();
  var scrollMax = $(eventTarget)[0].scrollHeight;

   /** If arrive at the end of the scrolling */
  if (scrollTop + elementHight + 1 >= scrollMax) {
    $(".div-2").focus();
  }
});

jQuery(window).one("load", function () {
  $(".div-1").focus();
});

div {
  overflow: auto;
  position: absolute;
  top: 0;
  height: 50px;
  width: 50%;
  margin: 0;
  padding: 0;
}

.div-1 {
  left: 0;
  background-color: red;
}

.div-2 {
  left: 50%;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-1">
  <ul><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li>
  </ul>
</div>
<div class="div-2">
  <ul><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li>
  </ul>
</div>