How to make a scroll with arrows?

Question

How to make a scroll with arrows?

Navigation

#1 by (1 votes)

0

I'm working on a project for an application on a touch screen monitor, and I need to make the layout according to the following image.

It will be a list of items, within a div for example, and it will have to be a scroll with buttons according to the image, where the arrows are, but I have no idea how.

javascript jquery css rolamento touch

asked by anonymous 23.01.2018 / 17:19

1 answer

Error After executing procedure: no output How to get all the public properties of a class in the order they were declared in VB.NET

score 1 · Accepted Answer

You can use animate of jQuery with scrollTop , by controlling the scroll of div up or down.

Here's a practical example you can customize as you want:

$("#botoes li").on("click", function(){
   var index = $(this).index();
   var lista_top = $("#lista").scrollTop();
   
   // o valor "20" é quanto em pixels irá rolar
   // 150 é o tempo da animação. Quanto maior, mais lenta.
   $("#lista").animate({ scrollTop: lista_top+Number((index == 0 && '-')+20) }, 150);
});

*{
   position: relative;
}

ul, li{
   margin: 0;
   padding: 0;
   list-style: none;
}

#botoes{
   display: inline-block;
   position: fixed;
   top: 10px;
   right: 10px;
   z-index: 9;
}

#botoes li{
   display: block;
   width: 30px;
   height: 30px;
   background-color: #fff;
   border: 2px solid #000;
   border-radius: 10px;
   margin: 1px;
   text-align: center;
}

#botoes li:hover{
   background-color: #ddd;
}

#botoes li:active{
   background-color: #090;
}

#botoes li i{
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  top: 5px;
}

.seta_cima{
   -webkit-transform: rotate(-135deg);  
   transform: rotate(-135deg);
}

.seta_baixo{
   -webkit-transform: rotate(45deg);  
   transform: rotate(45deg);
}

#lista{
   display: block;
   width: 300px;
   height: 200px;
   padding: 15px;
   border: 1px solid #000;
   overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="lista">
   <h3>Texto</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a massa et justo ornare porta. Vestibulum non vestibulum diam. Cras sagittis vitae orci in ultrices. Curabitur vulputate, ex sed placerat porta, diam lacus elementum felis, nec iaculis leo nulla et dolor. Proin aliquet, urna sed sodales condimentum, orci quam finibus ex, vitae sagittis metus nisi commodo mauris. In quis leo sodales, auctor nisl ac, rutrum felis. In sed est sollicitudin neque egestas volutpat facilisis ac metus.</p>
   <p>Praesent fringilla blandit velit vel auctor. Proin porta commodo erat a gravida. Nulla id ultrices massa. Quisque eu dui auctor, faucibus lacus vel, tempus diam. Sed sed ultrices massa. Suspendisse pellentesque, est non varius imperdiet, ex neque gravida magna, non vestibulum diam leo sed ligula. Aliquam id quam sed elit sollicitudin consequat id eu ex. In hac habitasse platea dictumst. Etiam rutrum egestas leo id molestie. Mauris volutpat nulla vel interdum fermentum. Pellentesque magna sapien, sollicitudin sed fringilla ut, tincidunt sed massa. Vivamus urna tellus, varius non consequat vel, elementum ut libero.</p>
</div>
<div id="botoes">
   <ul>
      <li><i class="seta_cima"></i></li>
      <li><i class="seta_baixo"></i></li>
   </ul>
</div>