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