0

私のページにはオーバーフローのある DIV があり、副スクロール方法として機能する 2 つのボタンを div の両側に配置しました。

左ボタンを押すと、次のスクリプトが実行され、完全に機能するようです。

        function slideLeft() {
        if ($("#divfieldWidgets").scrollLeft() == 0) {
            $('#divScrollWidgetsLeft').animate({ opacity: 0.1 }, 250);
            window.clearInterval(animationHandler);
        }
        $('#divfieldWidgets').animate({ scrollLeft: "-=100px" }, 250);
    }

ただし、右にスクロールするときにDIVがいつ限界に達したかを判断する方法を見つけることができないようです。

$("#divfieldWidgets").scrollLeft() と $("#divfieldWidgets").width() に基づく計算が必要なのは確かですが、これら 2 つの値に対して実行したすべての算術計算はそうで​​はありません。幅、最大値などとの関係を示す結果が得られます。

私が考えた最後のオプションが 1 つあります。それは、現在の scrollLeft 値を一時変数に格納し、新しい値を比較することです。変更がない場合は終了ですが、これを達成するためのよりクリーンな方法があるはずです。

何かご意見は？

4

1 に答える 1

1

あなたは次のようなものを使うことができます

$(function() {
    $('#lorem').scroll( function() {
        if ( $('#lorem').scrollLeft() == ($('#lorem p').width() - $('#lorem').width())) {
            alert('end!');
        }
    });
});

ここに示すように

イベント内でアクセス可能な変数に保存widthすることをお勧めしますreadyscroll

a = $('#lorem p').width();
b = $('#lorem').width();

そしてそれらを機能的に使用する

if ( $('#lorem').scrollLeft() == (a - b)) {
    // rest of the code
}

このようにして、でさらに2、3の関数呼び出しを節約できますscroll。これは非常にコストのかかるイベントであるため、他に解決策がない場合にのみ使用する必要があります。

理想的には、このようなスロットル関数呼び出しを使用する必要があります。これにより、関数呼び出しが遅延し、多くのリソースが節約されます。

于 2013-03-13T10:34:36.417 に答える