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 ,并为 list_scroller 提供更大的宽度。overflow-y: hidden;像这样的东西可能会起作用:

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

祝你好运,我希望这会有所帮助。:D

于 2012-05-01T20:12:53.887 回答
1

用于white-space:nowrap容器:http: //jsfiddle.net/BQGa7/

于 2012-05-01T20:00:13.267 回答
1

另外,不要忘记添加

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

用于 iOS 设备兼容性。

于 2012-05-01T20:27:06.093 回答