質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

CSSで横スクロールの中に縦スクロールを実装したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 819

score 0

前提・実現したいこと

VueでTrello風のタスク管理アプリケーションを学習で作成しており、チケットをまとめているリストカードを横スクロールで。
チケット自体は縦スクロールで実現したい。

発生している問題・エラーメッセージ

カードをリスト表示しているコンポーネントでの縦スクロールはCSSで実現できました。
カードの親コンポーネントであるカードをまとめているカードリストを表示しているコンポーネントに
横スクロールを実装しようとすると子コンポーネントのチケットまで横スクロールになってしまいます。

該当のソースコード

[Board.vue]//カードをまとめるリストのコンポーネント
<div class="listindex">

     <draggable 
      tag="div"
      :list="lists"
      :options="{animation:600}"
      @end="moveList"
      >

       <list v-for="(item,index) in lists"
         :key="item.taskid"
         :taskid="item.taskid"
         :title="item.tasktitle"
         :listindex="index"
         @listget="taskGet"
         class="list"
        >
       </list>
     </draggable>

 </div>

<style scoped>
.listindex {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  text-align: center;
}
</style>
[card.vue]//カードのコンポーネント
 <div class="cardindex">

     <draggable 
        tag="div"
        :list="cards"
        :options="{animation:600}"
        group="taskitems"
        @end="moveCard"
        @add="addCard"
     >

        <card-list v-for="(item,index) in cards"
           :key="item.cardid"
           :cardid="item.cardid"
           :cardtitle="item.cardtitle"
           :cardstarttime="item.start"
           :cardendtime="item.end"
           :cardenddate="item.enddate"
           :cardstatus="item.cardstatus"
           :cardindex="index"
           :cards="cards"
           :taskid="taskid"
           @deleted="cardsGet"
       />
    </draggable>

</div>

<style scoped>
.cardindex {
  overflow-y: auto;
  max-height: 350px;
  -webkit-overflow-scrolling: touch; 
  padding: 0;
}
</style>

試したこと

親コンポーネントで:not(.cardindex)を使用して影響が出ない様にできるかと考えたのですが、上手くいきませんでした。
子コンポーネントで:not(.cardindex){white-space: nowrap;}を使用したのですが、上手くいきませんでした。

補足情報(FW/ツールのバージョンなど)

vueのバージョン:vue@2.6.12 
vuetifyのバージョン:vuetify@2.3.18 
VSCodeを使用

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

親コンポーネントのCSS「white-space: nowrap;」が子要素に働いた結果、子要素の縦スクロールまで横スクロールになっていたようです。
子要素にCSS「white-space: initial;」を追加することで横スクロールの中に縦スクロールを実装できました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る