アプリに枠を埋め込んで、その枠自体をスクロールできるように

日本語が下手でうまく説明できませんが、下記図のようにページ自体でなく、ページの中に表示した「投稿一覧」や「誓約文」とかだけを枠で囲ってスクロールさせたかったので、やり方調べてみました。

参考サイト

https://techacademy.jp/magazine/25158

を参考にしました。

調べてみた

思ったより簡単で、cssでスクロールさせたい要素の親要素に

overflow: scroll ;

を付属すればいいだけみたいです。

実際にrailsのアプリで書いたコード

html.erb

<div class='card posts'>

<div class='card-body'>

<% @posts.each do |post| %>

<li class="list-group-item">

<div>名前:<%= post.user.name %></div>

<div><%= post.direction %>方面&ensp;

駅名:<%= post.station.station_name %>&ensp;

<%= post.time %>時頃</div>

<div>コメント:<%= post.comment %>&ensp;

混雑度:<%= post.congestion_level %></div>

</li>

<% end %>

</div>

</div>

scss

.posts{

height: 500px;

width: 500px;

overflow-y: scroll;

}

画面に投稿一覧を表示し、かつスクロールできるようにしました。

ちなみに

今回は上下スクロールしかつけませんでしたが、横スクロールつけるなら

overflow-x: scroll;

としたり、枠からはみ出す際はスクロールをつけず、はみ出た部分は表示させない。

などの設定もできるみたいです。

こんな簡単にできるとは思いませんでした(笑)

多分、また使うと思います。