14301


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


CC BY-SA 3.0
2015-08-11T22:56:51.950
14298
2015-08-12T01:55:27.693
7232
question
javascript html css angularjs ui-router
AngularJSで1画面に複数のスクロールをいれられますか


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

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

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

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

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-08-12T01:55:27.693
14301
2015-08-12T01:55:27.693
208
14298
answer