web-dev-qa-db-ja.com

prependでのスクロールを防ぐ方法は？

体の上部にコンテンツを追加しています。このコンテンツの高さが400〜500pxになる場合があります。このようなものが追加されると、ページを読んでいるときにコンテンツを押し下げると、非常に煩わしい場合があります。

新しいアイテムを表示するには、ここをクリックするようなものではなく、アイテムを自動的に追加したいのですが。

ページを移動せずに、このコンテンツを本文の上部に追加する方法はありますか？次に、ユーザーが一番上までスクロールすると、それはすでにそこにありますか？

javascriptjquery-uijquery-pluginsjquery
34
fancy

私は過去に、要素の前に要素を追加し、それらの合計の外側の高さを計算し、スクロールトップをその値に設定することによってそれを行いました。このようなもの：

var $current_top_element = $('body').children().first();
$('body').prepend(other_elements);

var previous_height = 0;
$current_top_element.prevAll().each(function() {
  previous_height += $(this).outerHeight();
});

$('body').scrollTop(previous_height);

これがあなたを正しい方向に向けることを願っています。

20
Groovetrain

これを行う最も一般的な方法は、変更の前後にドキュメントの高さを測定することだと思います。

var old_height = $(document).height();  //store document height before modifications
var old_scroll = $(window).scrollTop(); //remember the scroll position

//do anything
$("p:first").prepend( "<p>I just became first</p>" );

$(document).scrollTop(old_scroll + $(document).height() - old_height); //restore "scroll position"

そうすれば、ウィンドウが読んでいるコンテンツから離れることなく、実際に何でもできます:)

42
Sheraff

私は少し異なるアプローチを取りました：

本体の最初の要素（または、必要な本体以外の要素のふりをしている場合は別の要素）を取得することから始め、新しい要素のセットを追加した後、offset（本体に対してスクロールする必要がある場合）またはposition（に対してスクロールする必要がある場合）元の最初の要素の祖先要素）関数を使用して、更新された座標を取得し、そのポイントまでスクロールします。

何かのようなもの：

var current_top_element = $('body').children().first();
$('body').prepend(other_elements);

$('body').scrollTop(current_top_element.offset().top);

または、ボディスクロール以外の場合：

var current_top_element = $('#ul-element-id li:first'); //example with a list
$('#ul-element-id').prepend(other_elements);

$('#ul-element-id').scrollTop(current_top_element.position().top);

position（）は、オフセット親に対する要素の位置を返すことに注意してください。 ）、必要に応じて親要素のcss位置属性を設定してください（ http://api.jquery.com/offsetParent/ ）

詳細については、以下を参照してください。 http://api.jquery.com/category/offset/

9
MRods

私は知っています、私はそのトピックに非常に遅れています。掘り下げて申し訳ありませんが、本体に要素を追加するときに上にスクロールしないようにする非常に簡単な方法を発見しました。

自動スクロールは、スクロールのY位置がゼロのときに追加されます。単にこれを行う：

element.scrollTo(0, 1);

また、先頭に追加した後、要素が自動的に先頭に移動することはありません。

3
user4676340