1

スクロールすると、その親 #container div (できれば jQuery を使用) にクラスを追加したい水平スクロール div があります。

div がまだスクロールされていない場合:

$('#container').addClass('shadow-right').removeClass('shadow-left');

div が先頭または末尾にない場合:

$('#container').addClass('shadow-right shadow-left');

コンテナが最後までスクロールされた場合:

$('#container').addClass('shadow-left').removeClass('shadow-right');

私が達成しようとしていることを説明するいくつかの基本的な html/css を使用して JSFiddle をセットアップしました。

http://jsfiddle.net/Y39z8/3/

私が得ることができる助けをいただければ幸いです。ありがとう！

4

2 に答える 2

5

この動作デモを参照してください。

関連するjQueryは次のとおりです。

$(document).ready(function() {
    $("#scroll-container").on("scroll", function () {
        var cur = $(this).scrollLeft();
        if (cur == 0) {
            $('#container').addClass('shadow-right').removeClass('shadow-left');
        } 
        else {
            var max = $(this)[0].scrollWidth - $(this).parent().width();
            if (cur == max) {
                $('#container').addClass('shadow-left').removeClass('shadow-right');
            } else {
                $('#container').addClass('shadow-right shadow-left');
            }
        }
    });
    $("#scroll-container").trigger("scroll");
});

scrollLeft()これにより、現在の値が使用可能な最大値と比較され、それに応じてコンテナーのクラスが調整されます。

さらに、CSS を調整する必要がありました。.shadow-leftとの両方.shadow-rightが適用されると、 の設定.shadow-leftが単純に上書きされ、左の影だけになります。この最後のステートメントを CSS の最後に追加すると、これが修正されます (これは私がデモで行ったことです)。box-shadow.shadow-right

#container.shadow-left.shadow-right {
    box-shadow: inset 7px 0px 10px -7px blue, inset -7px 0px 10px -7px blue;
    -webkit-box-shadow: inset 7px 0px 10px -7px blue, inset -7px 0px 10px -7px blue;
    -moz-box-shadow: inset 7px 0px 10px -7px blue, inset -7px 0px 10px -7px blue;
}

編集:スクリプトは高速で実行されるため、スクリプトを少し最適化しscroll、ページの読み込み時にイベントをトリガーする最終行を追加して、コンテナーが最初から適切なシャドウを持つようにしました。

お役に立てれば！

于 2013-09-20T18:52:38.673 に答える
0

これはあなたが望むものだと思います.jQueryのスクロール機能を使用すると、アイテムがスクロールされたときにわかります

$('#container').addClass('shadow-right');  


$("#scroll-container").scroll(function(){
    $('#container').addClass('shadow-left');
    x=$("#scroll-container").scrollLeft();
    $("span").text(x);
    if(x==1014){
        x=0;
$('#container').removeClass('shadow-right');

    }
  });
于 2013-09-20T19:30:01.850 に答える