jQuery 滚动多个 div (.scrollLeft) 在 iPad 上不起作用

Question

我正在尝试调试某人编写的一些旧 jQuery 代码。它适用于除 iPad 之外的所有浏览器。目标是有两个单独的 div：一个标题行，然后是一个包含许多正文行的 div（在一个表中）。

这里是前端代码示例（我没有写，我知道有一些语义问题）：

<div class="detailsScroller" id="headerDetailsScroller" style="overflow:hidden;">
    <div class="scrollingDetailsContainer" style="width: 935px; ">
    <table class="alternating scrollingDetails" id="headerScrollingDetails">
        <thead>
            <tr class="even">
                <td>[Header Rows Here]</td>
                …
            </tr>
        </thead>
    </table>
    </div>
</div>

<div class="detailsScroller">
    <div class="scrollingDetailsContainer" style="width: 935px; ">
        <table class="alternating scrollingDetails" id="scrollingDetailsTable">
            <tbody>
                <tr>
                    <td>[Content Here]</td>
                </tr>
                <tr>
                    …
                </tr>
            </tbody>
        </table>
    </div>
</div>

因此，当滚动第二组<div>s 时，第一组应该滚动到旁边。它可以向左或向右。这是通过这个 jQuery 代码完成的：

$("#fakeHorizontalScroller").scroll(function(thing) {
    $("#headerDetailsScroller").scrollLeft(($(thing.target).scrollLeft()));
    $("div.detailsScroller").scrollLeft(($(thing.target).scrollLeft()));
});

我在研究中发现的唯一一件事是 .scrollLeft 在 Mobile Safari 上不起作用。是否有合适的替代方案或其他方法来解决这个问题？我发现的所有解决方案都是强制动画移动到事件的特定位置。我只是希望<div>s 在您左右滚动时相互跟踪。

Answer 1

找到了解决办法。看起来我需要使用 on scroll 事件。这解决了这个问题：

$("div.detailsScroller").on('scroll', function() {
    $("#headerDetailsScroller").scrollLeft($(this).scrollLeft());
})