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());
})

jQuery Scroll多个div（.scrollLeft）在iPad上不起作用

1 个答案: