1

垂直スクロールを実装しようとしています。'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/

4

1 に答える 1

9

最初のクリックでのみ機能する理由は、上から +48px または -48px しか移動していないためです。現在のscrollTop値から48を+/-する必要があります。

したがって、すでに上から 96 ピクセルのところにあるときに下に押すと、次のように 48 を 96 に追加します。

ここでjsfiddle

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

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

また、.live()jQuery 1.7+ から減価償却されていることに注意してください。私の例のように使用する必要があります.on()（jQuery 1.7+を使用している場合）

編集 - ボタンの表示/非表示機能を追加

ここでjsfiddleを更新しました

まず、いくつかの変数を計算する必要があります。必要に応じて両方の関数で使用できるように、クリック イベントの外でこれらを宣言しました。

// 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();
 }
于 2013-04-04T09:19:37.177 に答える