Mac Chromeの自動スクロール位置調整について

ボタンをクリックしたら要素を追加する様なJavaScriptを書いています。Mac版のChrome以外はボタンクリックきっかけで要素を追加した際、ブラウザのスクロール位置は変わらず要素が下に追加されるのですが、Mac版Chromeだけボタン位置にまで自動スクロールしてしまい、要素が上に追加された様な印象になります。
Mac版Chromeのバージョンは「85.0.4183.102」です。

[サンプルコード]

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>TEST</title>
</head>
<body>
	<div id="app" style="padding-bottom:80px"> 
		<div id="list">
			<ul>
				<li v-for="data in tests" style="width:200px;height:400px;background-color:#eee;margin-bottom:20px;">{{data}}</li>
			</ul>

		</div>

		<button v-on:click="addData">ボタン</button>
		
	</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
  	tests : ['a','b','c','d','e','f','g','h','i']
  },
  methods:{
  	addData : function (){
  		flg=true;
  		y = window.pageYOffset ;
  		this.tests.push(...['a','b','c','d','e','f','g','h','Z']);
  	}
  }
})

</script>	
</body>
</html>

Vue.jsでサンプルコードを書いていますが、jQueryで試してみてもネイティブのappendChildで試しても結果は同じでした。なお、サンプルコードは単に要素を追加しているだけですが本来はAjax通信してデータを取得してから要素を追加します。

この事象の良い解決策はありますでしょうか？

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

回答2件

自己解決

自己解決しました。。

buttonタグはクリックされるとhistoryに情報が追加される様で、Mac版Chromeは表示位置をhistoryの情報を元に維持しようとする為に事象が起こっていました。

buttonタグ以外のHTML的に意味のないタグ（divやspan）に置き換える事で解決しました。

投稿2020/09/10 04:36

Lab-art_Yamada

総合スコア14

はじめまして。
私も同じ事象に遭遇しました。

Mac版Chromeは表示位置をhistoryの情報を元に維持しようとする為に事象が起こっていました。

上記が確認できるようなドキュメント等ありましたらご教授いただきたいです。

投稿2020/09/11 08:43

編集2020/12/09 05:47

yamashooooo

総合スコア2

Lab-art_Yamada

2020/09/11 08:55

こんにちは。特にドキュメントが見つかったわけではなく、検証結果に基づいた推測？です。 [検証で分かった事] ・history.scrollRestorationをmanualに変更すると挙動がおかしくなる。・要素を追加した直後に自動でスクロールイベントが発生している。・buttonタグ以外に変更するとスクロールイベントが発生しなくなる。上記の検証結果から、buttonタグクリックきっかけでhistoryに何らかの情報が追加されてると判断したという次第です。