Question

我正在使用IntersectionObserver API构建一种演示文稿。我希望能够使用键盘箭头键上下滑动幻灯片。到目前为止，我已设法使其适用于点击事件。它更容易，因为我可以让interSectionObserver在点击时转到下一个兄弟。但在关键新闻中，我发现实施起来有点棘手。

我在CodePen https://codepen.io/umbriel/pen/ppqLXX

上有一个简化的测试用例

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')
      }
    }
  }

谢谢！

Answer 1

使用 onkeydown 事件监听器

键码：

left = 37
right = 39
up = 38
down = 40

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

1 个答案: