XxGodmoonxX https://blog.hatena.ne.jp/XxGodmoonxX/ 青いやつの進捗日記。 https://tech.motoki-watanabe.net/ タブ切り替え display none Javascript scrollTop CSS HTML こんな感じでタブで選んで中身のコンテンツを入れ替えたい。 わかりづらいがこの上がタブで、下がコンテンツ。 しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。 ↓下 つまり、 こういう感じ。 で、問題なのは、 ・このコンテンツは1つ目だけが高さが少ない ・このコンテンツをdisplay: blockとdisplay:noneで入れ替えている の2つ。 高さが変わらないのであればdisplayで切り替えても問題ない。 もしくは高さが変わるならばdisplayではなくopacityとvisibilityで消して、コンテンツ自体は一番大きいのは普通に置いてそれ以外をabsolu… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.motoki-watanabe.net%2Fentry%2F2019%2F11%2F20%2F012713" title="タブ切り替え等で中身のコンテンツの高さが変わる、display:noneで切り替えているときの、その切り替えているコンテンツの下の位置でスクロール位置保持 - 青いやつの進捗日記。" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/X/XxGodmoonxX/20191120/20191120012255.png Hatena Blog https://hatena.blog 2019-11-20 01:27:13 rich https://tech.motoki-watanabe.net/entry/2019/11/20/012713 1.0 100%