Question

因此，我正在制作一个列表，您可以通过单击按钮滚动浏览。它还需要一个滚动条可见并且也可以工作。但我不知道如何编辑我的代码以使它们兼具功能。我可以让按钮工作或滚动条，而不是两者。有人可以帮忙吗？

＆＃13;

var itemsToShow = 3;

$('#scroll>li').each(function(i,k) {
    var ele = $(this);
    $(ele).attr('id', 'scroll' + i);

});


$('#up').bind('click', function() {
    if ($('#scroll0:hidden').length > 0)
    {
        // This means we can go up
        var boundaryTop = $('ul li:visible:first').attr('id');
        var boundaryBottom = $('ul li:visible:last').attr('id');

        if ($('ul li#'+ boundaryTop).prev().length > 0)
        {
            $('ul li#'+ boundaryTop).prev().show();
            $('ul li#'+ boundaryBottom).hide();
        }
    }
});

$('#down').bind('click', function() {
    if ($('#scroll li:last:hidden').length > 0)
    {
        // This means we can go down
        var boundaryTop = $('#scroll li:visible:first').attr('id');
        var boundaryBottom = $('#scroll li:visible:last').attr('id');

        if ($('#scroll li#'+ boundaryBottom).next().length > 0)
        {
            $('#scroll li#'+ boundaryBottom).next().show();
            $('#scroll li#'+ boundaryTop).hide();
        }
}
});

＆＃13;

.lg {
    overflow-x:auto; 
    height:90px;
    overflow-y:auto;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="lg">
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ul>

<div id="updown">
  <a class="btn btn-primary" id="up" href="#">up</a>
<a class="btn btn-primary" id="down" href="#">down</a>
</div>

＆＃13;

我做错了什么？有人请帮忙！

谢谢！

Answer 1

以下是滚动到顶部和底部的方法：

https://jsfiddle.net/45cmhys8/

// Scroll to the top
$('a#up').on('click', function(){
   $('.lg').animate({ scrollTop: 0 }, 600);
})
// Scroll to the bottom
$('a#down').on('click', function(){
   $(".lg").animate({ scrollTop:$(document).height()}, 600);
})

Answer 2

您可以使用jQuery中的scrollTop（）函数在单行中执行此操作。

10是您想要向上/向下跳跃的像素数量。

$('#up').click(function(){
  $('ul.lg').scrollTop($('ul.lg').scrollTop()- 10);
});

$('#down').click(function(){
  $('ul.lg').scrollTop($('ul.lg').scrollTop() + 10);
});

Answer 3

看起来你正试图逐字地显示/隐藏字段，这会将它们从浏览器流中移除。而不是显示/隐藏，你应该使用javascript设置可滚动div的scrollTop位置，而不是操纵它内部的元素。

滚动按钮 - 使用jQuery

3 个答案: