how to make a horizontal scrollbar without using white-space: nowrap;

Asked

Viewed 23 times

0

I’m using white-space: nowrap; in a mother div to make a scrollbar horizontal. Only the elements inside the mother div for example <p>tag p ela não cair para abaixa ficar em uma linha reta</P>

Can you make a scrollbar unused white-space: nowrap;?

white-space: nowrap; //n]ao deixa quebrar a linha

*See the code: CSS and HTML

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato';
    text-decoration: none;
}

body{background: #ebebeb;}

.container{
    max-width: 1280px;
    padding:0 2%;
    margin:0 auto;
}

section.produtos{
  margin-top: 50px;
}

.produtos-geral::-webkit-scrollbar {
    height: 15px;
  }
   
.produtos-geral::-webkit-scrollbar-thumb {
    background: #008CFF; 
    border-radius: 5px;
    cursor: pointer;
} 

.produtos-geral{
  margin-bottom: 20px;
  padding-bottom: 10px;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

.el-produto{
  margin-right: 18px;
  width: 1280px;
  max-width: 255px;
  height: 400px;
  border-radius:5px;
  background: white;
}

.el-produto img{
  width: 100%;
  border-bottom:1px solid #eaeaea;
  border-radius:5px 5px 0 0;
}

.el-produto .el-desc-pg{
  padding: 20px;
 
}

.el-produto .el-desc-pg span{
  color: #999;
  text-decoration: line-through;
}

.el-produto .el-desc-pg h2{
  color: #333;
  margin-top: 4px;
}

.el-produto .el-desc-pg p{
  color: #666;
  margin-top: 6px;
}
<DOCTYPE html>
<html>
<head>
  <title>Exemplo</title>
</head>
<body>

  <section class="produtos">

  <div class="container">
  <div class="produtos-geral">


  <div class="el-produto">
  <a href="">
  <img src="https://wallpaperaccess.com/full/327371.jpg">
  <div class="el-desc-pg">
      <span>R$ 15,00</span>
      <h2>R$ 10,00</h2>
      <p>La parola "scienza" deriva dal latino "scientia", che           significa "conoscenza".</p>
  </div><!--el-desc-pg-->
  </a>
  </div><!--el-produto-->


  <div class="el-produto">
  <a href="">
  <img src="https://wallpaperaccess.com/full/327371.jpg">
  <div class="el-desc-pg">
      <span>R$ 15,00</span>
      <h2>R$ 10,00</h2>
      <p>La parola "scienza" deriva dal latino "scientia", che           significa "conoscenza".</p>
  </div><!--el-desc-pg-->
  </a>
  </div><!--el-produto-->


  <div class="el-produto">
  <a href="">
  <img src="https://wallpaperaccess.com/full/327371.jpg">
  <div class="el-desc-pg">
      <span>R$ 15,00</span>
      <h2>R$ 10,00</h2>
      <p>La parola "scienza" deriva dal latino "scientia", che           significa "conoscenza".</p>
  </div><!--el-desc-pg-->
  </a>
  </div><!--el-produto-->


  <div class="el-produto">
  <a href="">
  <img src="https://wallpaperaccess.com/full/327371.jpg">
  <div class="el-desc-pg">
      <span>R$ 15,00</span>
      <h2>R$ 10,00</h2>
      <p>La parola "scienza" deriva dal latino "scientia", che           significa "conoscenza".</p>
  </div><!--el-desc-pg-->
  </a>
  </div><!--el-produto-->


  <div class="el-produto">
  <a href="">
  <img src="https://wallpaperaccess.com/full/327371.jpg">
  <div class="el-desc-pg">
      <span>R$ 15,00</span>
      <h2>R$ 10,00</h2>
      <p>La parola "scienza" deriva dal latino "scientia", che           significa "conoscenza".</p>
  </div><!--el-desc-pg-->
  </a>
  </div><!--el-produto-->
  
  <div class="el-produto">
  <a href="">
  <img src="https://wallpaperaccess.com/full/327371.jpg">
  <div class="el-desc-pg">
     <span>R$ 15,00</span>
     <h2>R$ 10,00</h2>
     <p>La parola "scienza" deriva dal latino "scientia", che           significa "conoscenza".</p>
  </div><!--el-desc-pg-->
  </a>
  </div><!--el-produto-->

  </div><!--produtos-geral-->
  </div><!--container-->

  </section><!--produtos-->

</body>
</html>

javascript html css

  • I’m not sure I understand what you want to do

  • but usually use overflow: scroll to enable scroll bar...

  • @If I use it overflow: scroll and the white-space: nowrap; only if I don’t use white-space: nowrap; scrollbar in the horizontal does not work the way it is to work. Here comes question has how to do or way

  • I know there’s another way to do a horizontal scrollbar, only I’m out of ideas myself

1 answer

2

There is, that way:

  • In .produtos-geral remove the white-space: nowrap;.
  • In .el-produto add flex-shrink:0;.
  • Ready :)

You must also need to define height: auto;, or put a higher value.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.