4

私は jQuery を使用して記事のカルーセルに取り組んでおり、フレームワークをより適切に把握しようとしています。含む div があり、この div には複数の記事があります。

<div id="container">
    <article>
        <h3>Article Heading</h3>
        <p>Article Content</p>
    </article>
    <article>
    ...
</div>

div は特定の幅と高さにフォーマットされ、オーバーフローは非表示に設定されます

ユーザーがボタンをクリックすると、関数を呼び出して次または前の記事にスクロールするようにアニメーション化しようとしています

var articles = -1;
var currentPosition = -1;
window.onload = function(){
    articles = $("#container>article");
    currentPosition = 0;
}
function scrollNext(){
    $('#container').animate({
        scrollTop: $(articles[currentPosition+1]).offset().top
    }, 750);
    currentPosition++;
}

ただし、scrollNext 関数が呼び出されると、次の記事の段落にスクロールするか、順不同でスクロールします。

これがセレクターの問題なのか、ページのスタイリングの問題なのか、それともこれを行う適切な方法は何なのか疑問に思っています。 全ページはこちら

またはjsfiddleで試してみてください

4

2 に答える 2

2

あなたのマージンはあなたを台無しにしています。このようなことを試してみませんか？

var box = $("#container"), height = box.height();
currentPosition++;
box.animate({scrollTop: currentPosition*height});
于 2013-05-14T20:47:02.847 に答える
1

あなたが使用し.offset()ているのは、体と比較してオフセットを与えるものです。

内部をスクロールしたいのでdiv#container、使用する必要があります.position()

http://api.jquery.com/position/

また、使用position()するには、div#containerがposition: relative;css にある必要があります。

jQuery でそれを取得したら、scrollTop アニメーションを変更して、次の記事の にscrollTop()追加div#containerされたを含める必要があります。position()

そのようです：

$('#container').animate({
  scrollTop: $('#container').scrollTop() + $(pdiv).position().top
}, 750);

更新された jsfiddle ですべてが機能していることを確認できます。

http://jsfiddle.net/9ryjy/1/

于 2013-05-14T20:54:22.723 に答える