Javascript JS全页幻灯片使用按键导航

我正在使用IntersectionObserver API构建一种演示。我希望能够使用键盘上的箭头键来上/下幻灯片。 到目前为止，我已经设法使它在点击事件上工作。这更容易，因为我只需单击interSectionObserver就可以让它转到下一个兄弟节点。但在按键时，我发现实现有点棘手

我在CodePen上有一个简化的测试用例

谢谢

使用onkeydown事件侦听器

键码：

左=37 右=39 上升=38 向下=40

---

您希望向上/向下键产生什么行为？是否滚动到下一个/上一个条目？如果是这样的话，也许您可以找到最上面的可见条目元素，然后滚动到下一个元素Hi slezica，感谢您的关注。我只是编辑了这些问题来说明这一点。是滚动查看下一张或上一张与当前幻灯片相关的幻灯片这应该会有所帮助。一旦你知道了这个元素，找到下一个元素并滚动到应该很容易，因为你已经编写了代码。我可以将一个类设置为最可见的幻灯片，但是IntersectionObserver有时会将两个幻灯片标记为同时可见。这使得它很不一致。但使用ClickEvent，我可以确保只获得一个幻灯片位置。当您有两张可见幻灯片时，请选择最上面的一张。走一排幻灯片，选择第一张可见的幻灯片，其他幻灯片都会在下面。

function ioHandler(entries) {
    for (let entry of entries) {
      entry.target.style.opacity = entry.intersectionRatio.toFixed(2);
      entry.target.addEventListener('click', function(e) {
        if (this.nextElementSibling !== null) {
          this.nextElementSibling.scrollIntoView({
            'behavior': 'smooth'
          });
        }
      },true);

      if (entry.intersectionRatio > .5) {
        entry.target.classList.add('active')
      } else {
        entry.target.classList.remove('active')
      }
    }
  }