2

AngularJSでルーティングはui routerを使用してダッシュボードのようなものを作成しています。そこで質問なのですが、1画面に複数のスクロール可能なリストを入れることはできるのでしょうか。例えば左のリストをクリックしたら、右のViewにあるリストの内容が変化するような実装をしたいです。可能であればやり方を教えて下さい。よろしくお願いします。

1 件の回答 1

2

1画面に複数のスクロール可能なリストを入れることはできるのでしょうか。

これを実現できるかはCSSの書き方に依存します。Angular であるかどうかは関係ありません。

以下のサンプルの overflow-y: auto; に着目してください。これが指定された要素の中身の高さが height: 250px; よりも大きい場合、自動でスクロールできるようになります。同じような要素が2つあることで、それぞれ独立してスクロールできる要素を複数1画面に収めることができます。

要素をスクロール可能にするには、overflow を指定した上で、その高さが中身に依存しない=中身のほうが大きくなることが重要です。この例では display: inline-block (もしくは display: block も使える) に加えて、height を指定することで実現していますが、他にも方法は考えられます。まずは一例として参考まで。

.container {
  overflow-x: hidden;
  overflow-y: auto;

  display: inline-block;
  width: 170px;
  height: 250px;
  
  border: solid 1px red;
}

.left {
  margin-left: 25px;
  margin-top: 25px;
}

._stage {
  width: 400px;
  height: 300px;
  border: solid 1px black;
}
<div class="_stage">
  <div class="container left">
    <ul>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
      <li>Foo</li>
    </ul>
  </div>
  <div class="container right">
    <ul>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
      <li>Bar</li>
    </ul>
  </div>
</div>

1
  • ありがとうございます。できました! Commented 2015年8月13日 8:35

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。