Question

我正在尝试实现垂直滚动。当点击'down'-div时，它将向上移动1 div，当点击'up'-div时，它将向下移动1 div。但它只适用于第一次点击。用户应该能够点击直到最后一个div，然后才能禁用'down'-div。

HTML：

<div id="up">up</div>
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
</div>
<div id="down">down</div>

CSS：

#parent{
   width:300px;
   height:288px;
   border:1px solid #000;
   overflow:hidden;
}
.child{
   width:300px;
   height:48px;
   border:1px solid #FF0000;
}
#up{
   width:30px;
   height:20px;
   background-color:#006600;
   cursor:pointer;
}
#down{
   width:40px;
   height:20px;
   background-color:#006600;
   cursor:pointer;
}

使用Javascript：

$(document).ready(function(){    
   $('#down').live("click",function(){
      var scrollval = $('.child').height();
      $('#parent').scrollTop(scrollval);
   });

   $('#up').live("click",function(){
      var scrollval =  $('.child').height();
      $('#parent').scrollTop(-scrollval);
   });
});

jsfiddle：http://jsfiddle.net/XGXvD/

Answer 1

它仅适用于第一次点击的原因是因为您只是从顶部移动+ 48px或-48px。你需要从当前的scrollTop值+/- 48。

因此，如果我们已经从顶部开始96px并按下，我们想要添加48到96，如下所示：

jsfiddle here

 $(document).on("click", "#down", function(){
        var scrollval = $('.child').height();
        // this gives us the current scroll position
        var currentscrollval = $('#parent').scrollTop();

        $('#parent').scrollTop(scrollval+currentscrollval);
});

另请注意，{j} 1.7+已弃用.live()。您需要像我的示例一样使用.on()（如果您使用的是jQuery 1.7 +）

编辑 - 添加了显示/隐藏按钮功能

Updated jsfiddle here

首先，你需要弄清楚一些变量。我在click事件之外声明了这些，因此如果需要，它们可以在两个函数中使用。

// get the number of .child elements
var totalitems = $("#parent .child").length;
// get the height of .child
var scrollval = $('.child').height();
// work out the total height.
var totalheight = (totalitems*scrollval)-($("#parent").height());

<强>向上：

// hide/show buttons
if(currentscrollval == totalheight) {
     $(this).hide();         
 }
 else {
     $("#up").show();
 }

<强>向下：

 // hide/show buttons
 if((scrollval+currentscrollval) == scrollval) {
    $(this).hide();         
 }
 else {
     $("#down").show();
 }

使用jQuery进行垂直滚动

1 个答案:

编辑 - 添加了显示/隐藏按钮功能