javascript - HTML Scroll Box with horizontal controls for vertical scrolling

Question

I am trying to move the controls from a scroll box, from the default vertical position on the right side of the box, somewhere below it. My code so far looks like this:

<div class="scroll_box"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend hendrerit magna, ac tristique nulla vestibulum id. Aenean aliquam vehicula nunc sit amet convallis. Mauris sit amet lectus a metus accumsan dignissim. Integer pharetra quam nec lectus mattis lobortis. Aliquam id risus vel ante ornare rhoncus ac quis lacus. Duis dignissim urna sed leo dictum fermentum. Vivamus id orci odio, in congue quam.
    </div>

    .scroll_box {
        position:absolute;
        width: 400px;
        height: 100px;
        margin: 0px;
        overflow:auto;
        border: solid blue 1px;
    }

Below there screenshot of what I am trying to achieve.

How can i do this ?

LE: To be more precise, I am trying to use those red arrows to control the scroll. Basically if the user is pressing the "UP" arrow, the text should scroll up in the scroll box and similar for the "DOWN" arrow.

Answer 1

i'm not sure what exactly u r looking for but if u want the horizontal scroll instead of vartical then u should try this:

     <div class="scroll_box">
        <p class="p_width">
        By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow. 
        </p>
        </div>   


       <style> 
        .scroll_box {
        border:1px solid black;
        width:150px;
        height:100px;
        overflow-y:hidden;
        overflow-x:scroll;
          }
        .p_width{               
         width:250%;
          }

</style>