1

すべてのアイテムが表示されたら、次のボタンを非表示にする必要があります。

http://jsfiddle.net/afnguyen/Dpfvq/の完全な例を次に示します。

ここに私が使用しようとしているスクリプトがあります:

<script type="text/javascript">
        $(document).ready(function () {

            $('.prev').css('visibility', 'hidden');

            $(document).on("click", ".next", function () {

                $('.prev').css('visibility', 'visible');

                //.onebysix li could be .w6392597 or another height - whatever you want to scroll the height of
                var scrollval = $('.onebysix li').height();
                var currentscrollval = $('.onebysixmiddle').scrollTop();
                $('.onebysixmiddle').scrollTop(scrollval + currentscrollval);



                var maxHeight = $('.onebysixmiddle .items').height();
                if (currentscrollval >= maxHeight) {
                    //hide next button
                    $('.next').css('visibility', 'hidden');
                }


            });
            $(document).on("click", ".prev", function () {
                $('.next').css('visibility', 'visible');
                var scrollval = $('.onebysix li').height();
                var currentscrollval = parseInt($('.onebysixmiddle').scrollTop());
                $('.onebysixmiddle').scrollTop(currentscrollval - scrollval);

                if (currentscrollval == 0) {
                    //hide next button
                    $('.prev').css('visibility', 'hidden');
                }

            });
        });
    </script>

以前の非表示は正常に機能します。

 if (currentscrollval == 0) {
                    //hide next button
                    $('.prev').css('visibility', 'hidden');
                }

しかし、次に何を隠すべきかを知るのに苦労しています。これもレスポンシブデザインであるため、少し難しくなっています。

すべてのアイテムが表示された時点では、それ以上スクロールしませんが、ボタンを非表示にする必要があります。

どんな助けでも大歓迎です！

4

2 に答える 2

1

max_height を次から変更します

var maxHeight = $('.onebysixmiddle .items').height();

に

var maxHeight = $('.onebysixmiddle .items').height() - $('.onebysixmiddle').height();

フィドルの例

また変更

if (currentscrollval == 0) {
    //hide next button
    $('.prev').css('visibility', 'hidden');
}

に

if (currentscrollval - scrollval == 0) {
    //hide next button
    $('.prev').css('visibility', 'hidden');
}

と

if (currentscrollval >= maxHeight) {
    //hide next button
    $('.next').css('visibility', 'hidden');
}

に

if ((currentscrollval + scrollval) >= maxHeight) {
    //hide next button
    $('.next').css('visibility', 'hidden');
}

最後のページにいるときに矢印をもう一度クリックするのではなく、最後のページに到達したときに矢印を非表示にしたい場合

于 2013-09-04T09:41:16.923 に答える
0

ワーキングデモ

div の一番下までスクロールする際の計算が正しくありませんでした

編集したコードは

var val=$(".onebysix li").scrollTop() + $(".onebysix li").innerHeight()
var maxHeight = $('.onebysixmiddle li').height();
                if (val >= maxHeight) {
                    //hide next button
                    $('.next').css('visibility', 'hidden');
                }

ここに完全なコードがあります

 $(document).ready(function () {

            $('.prev').css('visibility', 'hidden');

            $(document).on("click", ".next", function () {

                $('.prev').css('visibility', 'visible');

                //.onebysix li could be .w6392597 or another height - whatever you want to scroll the height of
                var scrollval = $('.onebysix li').height();
                var currentscrollval = $('.onebysixmiddle').scrollTop();
              $('.onebysixmiddle').scrollTop(scrollval + currentscrollval);
    var val=$(".onebysix li").scrollTop() + $(".onebysix li").innerHeight()


                var maxHeight = $('.onebysixmiddle li').height();
                if (val >= maxHeight) {
                    //hide next button
                    $('.next').css('visibility', 'hidden');
                }


            });
            $(document).on("click", ".prev", function () {
                $('.next').css('visibility', 'visible');
                var scrollval = $('.onebysix li').height();
                var currentscrollval =$('.onebysixmiddle').scrollTop();
               $('.onebysixmiddle').scrollTop(currentscrollval-scrollval);

                if (currentscrollval == 0) {
                    //hide next button
                    $('.prev').css('visibility', 'hidden');
                }

            });
        });

これが役に立てば幸いです、ありがとう

于 2013-09-04T09:49:46.600 に答える