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 回答