Question

我有一个div，我用position:fixed滚动。这个div比视口的高度稍长，所以如果用户触摸它，我希望它们滚动div直到它完全出现在屏幕上（我不能出于其他原因使用溢出）。逻辑很好，我已经在Chrome平板电脑/台式机上测试了它，但是我使用document.getElementById("myelement").getBoundingClientRect().top来计算我们何时离开屏幕。

但是在iOS平板电脑上（可能是手机，但我没有人可以测试），我观察到了一件奇怪的事情。当我触摸并向上拖动时，即使位置固定，getBoundingClientRect().top也会无法控制地增长。当我附加调试器并突出显示div时，我看到蓝色阴影区域在我拖动手指时向上移动，即使div根本不移动。因此，似乎top报告了Safari计算最高价值的位置，即使它不是它所呈现的位置。

我对iOS / Safari不是很熟悉，所以也许这是设计的？如果是，我如何获得与其他浏览器中报告的top匹配的值？

我能够用这个最小的代码重新创建这个效果（只需复制足够的test2 div来创建滚动要求）

<h2>Test</h2>

<div style="position: fixed; top: 0; z-index:10001">
    <ul>
        <li>test1</li>
        <li>test1</li>
        <li>test1</li>
    </ul>
</div>
<div style="position: relative; width:100%">
    <div style="height:50px; width:95%">test2</div>
    <div style="height:50px; width:95%">test2</div>
    <div style="height:50px; width:95%">test2</div>
    <div style="height:50px; width:95%">test2</div>


</div>

ios safari上的getBoundingClientRect（）。top是否符合预期的触摸滚动效果？

0 个答案: