VoiceOver 不能正确地将元素滚动到视图之外

Question

带有垂直滚动内容的 HTML 固定页脚（我希望的标准内容，溢出：自动等）。

当通过右滑 VoiceOver 手势垂直滚动元素时，一旦 VoiceOver 焦点击中可见视图底部的元素，VoiceOver 焦点会正确移动元素，但滚动条仅滚动元素高度的一半，因此 VoiceOver 焦点会移动在可见区域下方。

编辑 更新了 sn-p，在前一个容器的高度小于 50%，为了清楚起见更新以表明高度无关紧要。

提前致谢。

.scrollContainer {
  position: absolute;
  overflow: auto;
  top: 0;
  width: 100%;
  bottom: 100px;
}

.rightData {
  float: right;
  padding-right: 10px;
}

.stepData {
  padding: 0px;
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
}

.stepData > li {
  height: 42px;
  border-top: 1px solid black;
  padding: 12px 20px;
  font-size: 1.25em;
}

#footer {
  position: absolute;
  height: 100px;
  width: 100%;
  bottom: 0;
  background-color: cyan;
}

<div style="height:500px;">
 <div id="container" class="scrollContainer">
        <ul class="stepData" style="padding:0px;">
            <li role="button" aria-label="date">06/01<span class="rightData" aria-label="steps">1001</span></li>
            <li role="button" aria-label="date">06/02<span class="rightData" aria-label="steps">1002</span></li>
            <li role="button">06/03<span class="rightData">1003</span></li>
            <li role="button">06/04<span class="rightData">1003</span></li>
            <li role="button">06/05<span class="rightData">1005</span></li>
            <li role="button">06/06<span class="rightData">1006</span></li>
            <li role="button">06/07<span class="rightData">1007</span></li>
            <li role="button">06/08<span class="rightData">1008</span></li>
            <li role="button">06/09<span class="rightData">1009</span></li>
            <li role="button">06/10<span class="rightData">1010</span></li>
            <li role="button">06/11<span class="rightData">1011</span></li>
            <li role="button">06/12<span class="rightData">1012</span></li>
            <li role="button">06/13<span class="rightData">1013</span></li>
            <li role="button">06/14<span class="rightData">1014</span></li>
            <li role="button">06/15<span class="rightData">1015</span></li>
            <li role="button">06/16<span class="rightData">1016</span></li>
            <li role="button">06/17<span class="rightData">1017</span></li>
            <li role="button">06/18<span class="rightData">1018</span></li>
            <li role="button">06/19<span class="rightData">1019</span></li>
            <li role="button">06/20<span class="rightData">1020</span></li>
            <li role="button">06/21<span class="rightData">1021</span></li>
            <li role="button">06/22<span class="rightData">1022</span></li>
            <li role="button">06/23<span class="rightData">1023</span></li>
            <li role="button">06/24<span class="rightData">1023</span></li>
            <li role="button">06/25<span class="rightData">1025</span></li>
            <li role="button">06/26<span class="rightData">1026</span></li>
            <li role="button">06/27<span class="rightData">1027</span></li>
            <li role="button">06/28<span class="rightData">1028</span></li>
            <li role="button">06/29<span class="rightData">1029</span></li>
            <li role="button">06/30<span class="rightData">1030</span></li>
            <li role="button">07/01<span class="rightData">1031</span></li>
            <li role="button">07/02<span class="rightData">1032</span></li>
            <li role="button">07/03<span class="rightData">1033</span></li>
            <li role="button">07/04<span class="rightData">1034</span></li>
            <li role="button">07/05<span class="rightData">1035</span></li>
            <li role="button">07/06<span class="rightData">1036</span></li>
            <li role="button">07/07<span class="rightData">1037</span></li>
            <li role="button">07/08<span class="rightData">1038</span></li>
            <li role="button">07/09<span class="rightData">1039</span></li>
        </ul>
    </div>
    <div id="footer">
    <p>
    footer
    </p>
    </div>
</div>

Answer 1

在 Voiceover 中使页面可滚动的技巧是使用 position:relative 而非 absolute 将主要内容区域保持在正常文档流中。 （我认为overflow: hidden and max-height: 100% on body 元素也会导致问题，但我需要做更多的研究。）导航可以使用固定定位并在其余内容旁边滑入。一个限制是，超出页面高度的菜单可能不会在 Voiceover 中滚动，因为它会受到原始定位错误的影响。

Answer 2

不确定这是否有帮助，但您可以尝试setting the VoiceOver focus manually。如果幸运的话，这也可能会滚动到正确的位置。

如果这不起作用，您可以尝试使用Element.scrollIntoView()，它应该可以在最新版本的 Safari Mobile 中使用。但我不确定这是否也能很好地与 VoiceOver 配合使用。