Ahmet emre CETIN Ahmet emre CETIN - 1 year ago 182
HTML Question

Div with vertical scrolling

I need to implement an element with a left - right scroll effect, like this :
enter image description here

How can do this?

Here is my code :

<div class="populardiv">
<div class=populart></div>
<div class=populars></div>
<div class=populars></div>
<div class=populars></div>
<div class=populars></div>
<div class=populars></div>
</div>




.populardiv
{
float:left;
width: 100%;
height: 35vw;
background-color:white;
overflow-x: scroll;

}

.populars
{
float:left;
width: 20vw;
height: 20vw;
border-radius: 50%;
background-color: red;
margin-left:3vw;

}


My output screen :

enter image description here

Thanks.

Answer Source

Here is a solution :

<div class="populardiv">
   <div class=populart></div>
   <div class=populars></div>
   <div class=populars></div>
   <div class=populars></div>  
   <div class=populars></div>
   <div class=populars></div>   
</div>


<style>
.populardiv
{
   height: 35vw;
   background-color:white;
   overflow: auto;
   white-space: nowrap;
}

.populars
{
   width: 20vw;
   height: 20vw;
   border-radius: 50%;
   background-color: red;
   margin-left:3vw; 
   display: inline-block;
}
</style>

JSFiddle here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download