CODEWITHSUNDEEP
htmlcss
Leewan
Leewan

Reputation: 31

WHY its not scrolling x-axis with overflow-x scroll.Instead it scroll to y-axis

Not scrolling x-axis with overflow-x scroll. Instead it scroll to y-axis.

This code snippet: 

        .col {
        overflow-x: scroll;
        background-color: #3e5771;
        width: 90%;
        height: 200px;
        margin: auto;
        border: 2px solid #1abc9c;
        border-radius: 15px;
    }
    
    .box img {
        display: inline-block;
        margin: 8px;
    }
    <div class="col">
    <div class="box">
    <a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
    </div>
    </div>

Upvotes: 0

Views: 86

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26400

From what I understand, you want to make a horizontal scrolling and prevent vertical scrolling.

You did set the overflow-x : auto alright, but you forgot to set overflow-y : hidden. Also, to force the content on one row, one easy way is to use display:flex :

.col {
  overflow-x: scroll;
  background-color: #3e5771;
  width: 90%;
  height: 200px;
  margin: auto;
  border: 2px solid #1abc9c;
  border-radius: 15px;
  
  overflow-y: hidden; /* add this */
}

.box{
 display : flex; /* add this */
}

.box img {
   /* display: inline-block; Remove this */
  margin: 8px;
}
<div class="col">
  <div class="box">
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
  </div>
</div>

Upvotes: 1

Related Questions