「もっと見る」ボタンで要素を表示したとき、画面が「もっと見る」ボタンに追従してしまう

「もっと見る」をCSSのdisplay:noneを使って実装しています。
最初に要素全てを読み込んでおき、「もっと見る」ボタンを押すとdisplay:noneを外すようなロジックです。

【現状】
「もっと見る」ボタンを押すと、
当然ながら「もっと見る」ボタンの上に要素が追加されるのですが
画面が「もっと見る」ボタンについていってしまい、
スクロール位置的に画面が下に移動したような形になってしまいます。

【理想】
ボタンを押してもスクロール位置はそのままでいてほしい

html
1<ul class="new-post">
2    <li>
3        <a hred=""><img></a>
4    </li>
5    <li>
6        <a hred=""><img></a>
7    </li>
8    <li>
9        <a hred=""><img></a>
10    </li>
11    <li>
12        <a hred=""><img></a>
13    </li>
14    <li>
15        <a hred=""><img></a>
16    </li>
17    <li>
18        <a hred=""><img></a>
19    </li>
20    <li class="is-hidden">
21        <a hred=""><img></a>
22    </li>
23    <li class="is-hidden">
24        <a hred=""><img></a>
25    </li>
26    <li class="is-hidden">
27        <a hred=""><img></a>
28    </li>
29    <li class="is-hidden">
30        <a hred=""><img></a>
31    </li>
32    <li class="is-hidden">
33        <a hred=""><img></a>
34    </li>
35    <li class="is-hidden">
36        <a hred=""><img></a>
37    </li>
38</ul>
39<a class="more" href="#">もっと見る</a>

css
1.new-post {
2    display: flex;
3	justify-content: space-between;
4	flex-wrap: wrap;
5}
6.new-post li{
7    opacity: 1;
8    transition: all 0.4s ease 0s;
9	width:33%;
10	height:auto;
11}
12.new-post li.is-hidden {
13    display:none;
14}

javascript
1//もっと見るボタン
2var moreNum = 6;
3$('.new-post li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
4$('.more').on('click', function() {
5  $('.new-post li.is-hidden').slice(0, moreNum).removeClass('is-hidden');
6  if ($('.new-post li.is-hidden').length == 0) {
7    $('.more').fadeOut();
8  }
9	return false;
10});

Zuishin

2020/09/27 08:02

問題の再現する最小のコードを新しく作ってそれを掲載してください。

Zuishin

2020/09/27 08:37

再現しません。

shiramiso

2020/09/27 08:40

となると親要素の指定のせいか、 Windows10 Chromeですが、ブラウザ起因の可能性もありますかね。。ご確認いただきありがとうございます…！

hatena19

2020/09/27 09:55

『画面が「もっと見る」ボタンに追従してしまう』というのが意味が伝わりづらいので、「もっと見る」をクリックする前と、した後のスクリーンショットを提示して、実際はどのようなスクロール位置になってほしいかもスクリーンショットで提示してもらえると、ご希望のことが伝わると思います。

Zuishin

2020/09/27 10:48 編集

このコードは Chrome で理想の方の動きになります。問題が「再現する」コードを掲載してくださいと書いたように思いますが、そちらでは再現するんでしょうか？それとも再現するかしないか試していないんでしょうか？

shiramiso

2020/09/27 10:54

問題が発生してるので質問しているのであって、Zuishin様が再現しない→環境起因かな？という推測です！

Zuishin

2020/09/27 10:56

まず、このコードはそのままではスクロールできません。できるよう手を加える必要があります。どのように手を加えると再現しますか？

hatena19

2020/09/27 11:02 編集

提示のコードを、Win10 の Chrome と FireFox で確認してみましたが、どちらも理想の動きになりますね。念のために提示のコードの前後に高さのある要素を追加してみましたが、理想の動きです。 shiramisoさんの環境では、提示のコードだけで症状がでますか。

Lhankor_Mhy

2020/09/27 12:32

CSSの overflow-anchor が設定されているとか……？ https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor https://developers-jp.googleblog.com/2017/04/scroll-anchoring-for-web-developer.html

shiramiso

2020/09/27 16:41

>CSSの overflow-anchor が設定されているとか……？神です。それでした。 Chromeだと表示位置を自動的に留めてくれる機能があるそうです。 bodyに対して overflow-anchor : none ; を追記することで解消されました。ありがとうございます…！！！ベストアンサーにしたい…

Zuishin

2020/09/27 22:21 編集

この質問に掲載された CSS には無いものが原因の一つなら、原因は少なくとももう一つあるはずです。でなければ、それが無いのにこのコードで再現するはずがないでしょう。しつこいようですが、再現するんですよね？私は問題が再現するコードを掲載するように言い、あなたの掲載したコードで再現しないことを実際に確かめた上で本当に再現するかどうか確かめたのか確認をとり、それに対してあなたは再現すると言いました。間違いありませんか？

Zuishin

2020/09/27 22:22

> shiramiso > 2020/09/27 19:54 > 問題が発生してるので質問しているのであって、Zuishin様が再現しない→環境起因かな？という推測です！