Question

我需要在显示所有项目后隐藏下一个按钮。

中的完整示例

这是我尝试使用的脚本：

<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');
                }

但我很难知道接下来应该隐藏什么。由于这也是一个响应式设计，它使它变得更难。

当所有项目都已显示时，它不会再滚动但我需要它来隐藏按钮aswel。

任何帮助表示赞赏！

Answer 1

从

更改你的max_height

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

到

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

喜欢这样Fiddle Example

同时更改

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');
}

如果您希望箭头在到达最后一页时消失，而不是在最后一页时再次点击它们

Answer 2

正在使用 DEMO

滚动到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');
                }

            });
        });

希望这有帮助，谢谢

当没有更多列表项时，Jquery隐藏垂直滚动按钮

2 个答案: