3

基本的に、次の要素に適切にスクロールしない div にリスト項目の順序付けられていないリストがあります。リストを上下にスクロールするボタンを用意しようとしています。

liコードはスクロールしますが、要素と一致しません。クリックするたびに少し上にスクロールし、次のクリックで下にスクロールします。DOM を歩いてみて、スクロール先の要素が要素であることを確認しましたがli、問題は見られませんでした。

私は次のjsfiddleを持っています: http://jsfiddle.net/YD9s5/9/

要素は次のとおりです。

  • ID のスクロール divphotos-div
  • の ID を持つ順序付けられていないリストphotos-li(おっと、今は残しておきます)
  • photo-li-XX が数値の場合、ID が増加するリスト アイテム

div をスクロールするために使用されているコードは次のとおりです。

        $('#photos-div').scrollTop($('#photo-li-' + i).offset().top);

ご覧のiとおり、変数はインクリメントされています。

4

2 に答える 2

6

問題は、ドキュメント全体に対する.offset()要素の位置を取得し、その位置が常に上に移動していることです。そのため、アイテム 1 までスクロールすると、アイテム 1がドキュメント内に現在持っている、アイテム 0 があった場所が返されます。.offset().top

console.log( $('#photo-li-0').offset() );関数の先頭に追加すると、scrollToElement()私が何を意味するかがわかります。上部のオフセットが減少し続け、ドキュメントの上部から離れるにつれて、負の数に急速に移動することに注意してください。

$('#photo-li-'+i)修正は、と$('#photo-li-0')(またはコンテナー自体)のオフセットの差を取り、$('#photos-li')代わりにスクロールすることです。

var newpos = $('#photo-li-' + i).offset().top - $('#photo-li-0').offset().top;
$('#photos-div').scrollTop(newpos);

http://jsfiddle.net/mblase75/x4hQP/ (他の改善を組み込みます)

于 2013-06-12T15:51:19.457 に答える
0

.offset()ドキュメントの上からのみ測定しているようです。要素が の上部からどれだけ離れているかに関心があり#photos-divます。これは、 div内の位置を手動で追跡する作業バージョンです。コンソールで、値をログに記録すると.offset()、スクロールする div ではなくドキュメントに相対的であることに注意してください。

その div の位置を保持せずにこれを行う方法があるはずです。取り組んでいます...

これが私のよりプログラム的な解決策です。

于 2013-06-12T15:58:03.080 に答える