VoiceOver不会正确滚动元素视图

Question

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

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

编辑更新后的代码片段，在前一个容器高度小于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

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

Answer 2

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

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