Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

画像一覧表示で指定の枠内でスクロールさせる方法

More than 1 year has passed since last update.

現在スクールにてプログラミングを学習中
目標は4週間の間でフリマアプリを完成させる

開発環境
rails 5.2.4.1
ruby 2.5.1

初学者向けに記述してます
アウトプット練習の為でもあります。

実装したいこと
画像を指定の範囲内でスクロールさせる。

完成イメージ
https://i.gyazo.com/55340c88a724b2e46eee6ed3254fbef6.mp4
写真は動物ですがあくまでテストイメージです。
予めご了承ください。

実装にあたりhamlの記述は終えているものとします。
書きにはSCSSの記述のみ載せます。

まずはスクロールさせたいブロックの枠のクラスに下記を記述(👉部分)

&__lists {
  width: 800px;
  padding: 26px 0;
  margin: 0 auto;
  display: flex;
👉overflow-x: scroll;

次にスクロースさせたい子要素の.scssに記述を追記

.item_list {
👉min-width: 250px;
  height: 245px;
  color: #000000;
  background-color: #ffffff;
  display: inline-block;
  position: relative;
  margin: 0 10px;

widthにmin-を追加する記述で最低の枠の大きさを固定でき
指定した大きさの枠内でクスロールしてくれる。

これでスクロール完了です。

y-ikeda0204
駆け出しエンジニアです。 プログラミングスクールで学んだ内容をアウトプットする為記述しております。 よろしくお願い致します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away