如何创建一个可滚动的div？

Question

我相对较新的编码，我期待重新创建这个我在Photoshop中设计的http://prntscr.com/e73jze。任何人都可以给我最简单的方法来做到这一点？根据您的照片包括，这种设计的造型完全匹配

非常感谢

Answer 1

不会有一个简单的答案。做一个简单的<div>与水平滚动的内容，你可以做这样的事情：

#wrapper { 
 
    display:flex; 
 
    flex-wrap:none; 
 
    height:200px; 
 
    width:100%; 
 
    background-color:black; 
 
    overflow-x: scroll; 
 
    } 
 

 
.photo-box { 
 
    flex:0 0 auto; 
 
    margin:25px; 
 
    background-color:white; 
 
    width:300px; 
 
    height:150px; 
 
    }

<div id='wrapper'> 
 
    <div class='photo-box'></div> 
 
    <div class='photo-box'></div> 
 
    <div class='photo-box'></div> 
 
    <div class='photo-box'></div> 
 
    <div class='photo-box'></div> 
 
    <div class='photo-box'></div> 
 
    <div class='photo-box'></div> 
 
</div>

但是像滚动条造型事情不是那么简单的，需要有相当数量更多的加价。

使用与overflow:scroll的div作为获取滚动框的起始位置，您可以找到用于制作自定义滚动条的jQuery插件here。

Answer 2

只需插入您自己的图像并设置滚动条的样式。

#scrollable { 
 
    width: 500px; 
 
    height: auto; 
 
    margin: 100px auto; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
}

<div id="scrollable"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" /> 
 
</div>