Q&A
（質問文は編集できます）提示されたHTMLにはスクロールする要素以外の要素が書かれていません。それであればそもそも#centerをスクロールする理由がありません。最終的にどういうことをしたいのかを、ある程度HTML/CSSを組んだ状態で提示することをお勧めします。
スクロールした際に、ページでセンタリングしている部分だけを動くようにしたいのですが、
どうにもうまく行きません。
(TwitterのPCサイト版の様な感じです。)
html
1<body> 2 <seciton id="center"> 3 </section> 4</body>
この様に記述されているHTMLがあり、CSSで
css
1html,body { 2 height: 100vh; 3 overflow: hidden; 4} 5 6#center { 7 overflow-y: scroll; 8}
とすると、想像しているイメージに近いものは出来るのですが、
ブラウザの右側にはスクロールバーが表示されず、#center要素の部分にスクロールバーが表示されてしまいます。
(html,bodyはhidden指定してて#centerにscroll指定してるから当たり前なんですが....)
ブラウザの右側にスクロールバーを出しつつ、真ん中のみのスクロールにする方法はないのでしょうか？
HTMLとCSSの初歩的な質問かもしれませんので、お恥ずかしい限りですがご教授いただければと思います。
宜しくお願いします。
回答3件
0
発想を逆にして、左右のサイドバーを固定するという考え方で設計してくだい。
(TwitterのPCサイト版もそうなっていると思います。)
固定する方法はCSSのposition: fixed; か position: sticky; を使います。
投稿2020/03/30 04:54
総合スコア34075
0
こういうことでしょうか？
固定したい要素に対して、「position: sticky」と位置（top, right, bottom, leftのうち少なくとも1つ）を指定するだけです。
投稿2020/03/30 05:00
総合スコア36960
0
自己解決
センタリング要素以外をfixedで固定する事で自己解決する事ができました。
お騒がせしました...
投稿2020/03/30 04:54
総合スコア5
あなたの回答
tips
プレビュー
