时间戳

首页 > 解决方案 > 使用箭头键滚动在 Gatsby 中不起作用

javascript - 使用箭头键滚动在 Gatsby 中不起作用

问题描述

我目前正在使用 Gatsby 开发一个 React 项目，其中页面在页面的主要元素内滚动，并且主要元素包含在滚动时捕捉的部分（使用scroll-snap-type/ scroll-snap-align）。我的网站结构如下：

<body>
  <div id="___gatsby">
    <div tabindex:"-1" id="gatsby-focus-wrapper" style="outline: none;">
      <main>
        <section></section>
        <section></section>
        <section></section>
      </main>
    </div>
  </div>
</body>

出于某种原因，在主元素内滚动页面会消除我使用箭头键滚动网站的能力，而问题似乎#gatsby-focus-wrapper是@reach/router 出于可访问性原因添加的。

经过一些实验后，我发现我可以通过从主元素中删除 tab-index 属性#gatby-focus-wrapper或tabIndex: {-1}在主元素上设置来解决问题。这允许我在通过单击页面使主要元素处于活动状态后使用箭头键滚动，但这并不理想。

下面的代码片段演示了这种行为（如果不先单击页面，就无法使用箭头键滚动）但是如果您将此代码复制到新的 Gatsby 项目中（当然减去 gatsby 包装器元素），您将无法使用滚动完全没有使用我上面描述的方法之一的箭头键：

html {
  height: calc(100vh - calc(100vh - 100%));
}
body {
  margin: 0;
}
body, #___gatsby, #gatsby-focus-wrapper, main {
  height: 100%;
}

main {
  overflow: hidden scroll;
  scroll-snap-type: y mandatory;
}

.blue, .green, .yellow {
  height: 100%;
  scroll-snap-align: start;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
<div id="___gatsby">
  <div id="gatsby-focus-wrapper" tabindex:"-1">
    <main>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="yellow"></div>
    </main>
  </div>
</div>

有没有办法让主要元素默认激活来解决这个问题？如果是这样，这会破坏我的屏幕阅读器网站吗？或者也许一些我没有利用的内置 Gatsby 功能？

标签： javascriptcssreactjsscrollgatsby

解决方案

推荐阅读