画面外でappendするとappend分がスクロールされません

画面外でappendした場合、Win10 Chrome、android Chromeはappend分がスクロールされません。append分もスクロールさせるためにはどうすれば良いでしょうか。

$(function () {
    $('#a').click(function() {
        $(#b).append(<div>a</div>);
    });
});

■画面外、画面内のどちらでappendしてもappendした分スクロールされる
ios safari
ios Chrome
Win10 ie11
Win10 edg

■画面外でappendしても、appendした分スクロールされない。
■画面内でappendするとappend分スクロールされる。
Win10 Chrome
android Chrome

kei344

2019/09/13 16:13

https://jsfiddle.net/a5teugsc/ これでも再現しますか？

inari1973

2019/09/13 16:26

再現されます。画面下の外に追加ではなく、画面上の外に追加です。 <div id="b">#b</div><div id="a">#a</div>

inari1973

2019/09/13 16:38

すいません。再現できませんでした。再調査して出直します。

行動規範の内容に同意します

回答2件

ベストアンサー

スクロール位置を保持したいということだと認識しました。

jQuery
1    $('#a').click(function() {
2        const y = document.documentElement.scrollTop;
3        $('#b').append('<div>a</div>');
4        document.documentElement.scrollTop = y;
5    });

ただし、ブラウザ(Chrome/Firefox)が今見ているところを見失わないようにしている処理だと思うので不要な処理と思われるかもしれません。

投稿2019/09/17 07:26

x_x

総合スコア13749

inari1973

2019/09/17 10:27

明日までには試してご連絡をさせていただきます。ありがとうございます。

inari1973

2019/09/17 10:38 編集

細部まで検証しておりませんが、かなり挙動が改善されましたので、ベストアンサーを付け替えさせていただきました。細部まで検証した後に、改めてコメントさせていただく予定です。

inari1973

2019/09/18 06:59

Win10 ie11でまれに完璧に動作しないときがありますが、それ以外ios safari、ios Chrome、Win10 edg、Win10 Chrome、android Chromeでは動作が確認できました。スクロール量を取得するので、画面外でスクロールされても位置を見失わないということですね。ありがとうございました。

行動規範の内容に同意します

動くサンプル：https://jsfiddle.net/a5teugsc/
動くサンプル：https://jsfiddle.net/nu5hwb4c/

上に追加も下に追加もWindows10Chromeで問題が再現しませんでした。
Chromeを別ユーザで起動するか、プライベートブラウジングを利用しても同じ状況でしょうか。
（もし問題がなかったら拡張などの問題かも）

【Chromeを複数(多重)起動する方法（ユーザごとに別設定のプロファイルを作成） | ぱーくん plus idea】
https://web.plus-idea.net/on/chrome-multi-process/

【プライベートブラウジング - パソコン - Google Chrome ヘルプ】
https://support.google.com/chrome/answer/95464?co=GENIE.Platform%3DDesktop&hl=ja

投稿2019/09/13 16:34

kei344

総合スコア69596

inari1973

2019/09/14 06:59 編集

ベストアンサーとさせていただきましたが、症状が再現できましたのでご連絡をさせていただきました。以下の動くサンプルを使わせていただきます。 https://jsfiddle.net/nu5hwb4c/ ＃b ＃a となっている画面をスクロールバーを使って＃bを完全に隠して、#aだけ見えるところまでスクロールさせます。ぎりぎりまでスクロールさせたほうが症状がでやすいです。そして＃aをクリックすると下ではなく上にスクロールしてしまいます。 Win10のChromeで確認しました。