4

プラグインを使用せずに、外部ボタンを使用してスクロール可能なコンテナーを作成しようとしています。幅と高さが固定され、オーバーフローが隠されている #feed というコンテナーがあります。その中に、高さ 560px の #feed-inner があります。#feed-inner を上下に移動する上向き矢印と下向き矢印がありますが、#feed-inner が 0 または最大高さ (560px) を超えて移動できないように、アニメーションを制限する必要があります。

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: '+=70'
  }, 500, function() {
  });
});
4

2 に答える 2

2

$.positionを使用して、#feed-inner相対的な現在位置の値を取得できます。これにより、位置が 0 にあるか、最大の高さが 560px にあるかを確認できます。コードは次のようになります。#feed

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 0 ? '0' : '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 560 ? '560' : '+=70'
  }, 500, function() {
  });
});

上向きにする (コンテンツが下向きにスクロールしているように見せる)#arrow-nextことに注意してください。#feed-inner#arrow-prev

追加の注意点として、 の位置が に#feed-inner達すると、要素が完全に下に移動し、空のコンテナ560pxが表示されるため、空白のキャンバスが表示されます。これを回避するには、コンテナー#feedの高さを計算し、560 を超えて動かないようにする必要があります。#feed#feed-inner$(#feed).outerHeight();

于 2012-11-06T06:26:45.557 に答える
0

クリック関数内にいくつかの条件ステートメントが必要なだけのように見えますね? 

if($('#feed-inner').position().top >= 70){

上部距離が 70 以上かどうかを確認します。

max-height 値が動的かどうかはわかりません。

if($('#feed-inner').position().top <= $('#feed-inner').css('maxHeight').split('px')[0]){

上の距離が maxheight より小さいかどうかを確認します。

残念ながら、maxHeight は生の整数としてアクセスできないため、文字列を分割しpx、配列の最初のセットを取得して生の整数を取得する必要があります。

于 2012-11-06T06:22:14.920 に答える