Question

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

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

编辑更新的代码段，前一个容器高度小于50％，为了清晰起见而更新，表明高度并不重要。

提前致谢。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

在画外音中使页面可滚动的技巧是使用position:relative而不是absolute将主要内容区域保留在普通文档流中。（我认为溢出：隐藏和最大高度：100％的身体元素也会导致问题，但我需要做更多研究。）导航可以使用固定定位并滑动到其余内容旁边。一个限制是，同样溢出页面高度的菜单可能不会在画外音中滚动，因为它会受到原始定位错误的影响。

Answer 2

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

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

VoiceOver无法正确地将元素滚出视图

2 个答案: