2

netflixで見られるリストに似た水平スクローラーを作成したいと思います。これは、htmlの基本的な設定です。

これは、私の取り組みを説明するために使用する画像です。 ここに画像の説明を入力してください

上部の設定は私が望むものです:scrolling_listには設定された幅があります(たとえば、300pxに設定します)。次に、このdiv内に、outer_listと呼ばれる複数の子をホストするリストスクローラーがあります。上の設定は、list_scrollerの幅が子の数(子の数に応じて1000、1300、1600など)に応じてどのように拡大するかを示しています。

残念ながら、cssでこれを行う方法がわかりません。list_scrollerの幅を指定しない限り、その幅は拡張されません(最初の子の幅を想定します)。代わりに、list_scrollerはこの短い幅を想定し、子は水平方向にスタックすることになります。

誰かが私がこれを修正するのを手伝ってもらえますか?現在のcssは次のとおりです。

.scrolling_list {
    overflow:auto;
    overflow-y:hidden;
    position:relative;
    width:360px;
}
.list_scroller {
    position:relative;
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    padding:10px;
    height:360px;
}
.list_scroller .outer_list {
    width:260px;
    display:inline-block;
}
4

3 に答える 3

4

あなたは正しい軌道に乗っています!overflow: auto;andを設定する代わりに、overflow-y: hidden;オーバーフロー全体を非表示に設定し、list_scroller の幅を大きくする必要があると思います。このようなものがうまくいくかもしれません:

http://jsfiddle.net/mEg7g/1/

頑張ってください、これがお役に立てば幸いです。:D

于 2012-05-01T20:12:53.887 に答える
1

また、追加することを忘れないでください

-webkit-overflow-scrolling: touch; /* I guess iOS 5 only */

iOS デバイスの互換性のため。

于 2012-05-01T20:27:06.093 に答える
1

white-space:nowrapコンテナーに使用: http://jsfiddle.net/BQGa7/

于 2012-05-01T20:00:13.267 に答える