如何創建一個可滾動的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>