0

誰かが書いた古い jQuery コードをデバッグしようとしています。iPad 以外のすべてのブラウザで正常に動作します。目標は、2 つの別個の 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>

したがって、 の 2 番目のセット<div>sがスクロールされると、最初のセットも一緒にスクロールする必要があります。左または右に移動する可能性があります。これは、次の jQuery コードによって実現されます。

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

私の調査で見つけた唯一のことは、.scrollLeft が Mobile Safari で機能しないことです。適切な代替手段、またはこれにアプローチする別の方法はありますか? 私が見つけたすべての解決策は、アニメーションをイベントの特定の場所に強制的に移動させることです。<div>s左右にスクロールすると、両方がお互いを追跡したいだけです。

4

1 に答える 1

0

修正を見つけました。on scroll イベントを使用する必要があるようです。これで問題は解決しました：

$("div.detailsScroller").on('scroll', function() {
    $("#headerDetailsScroller").scrollLeft($(this).scrollLeft());
})
于 2013-09-17T19:22:08.817 に答える