HTML滚动框，带有用于垂直滚动的水平控件

Question

我正在尝试从滚动框中移动控件，从框右侧的默认垂直位置移动控件。到目前为止我的代码看起来像这样：

<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;
    }

下面是我想要实现的截图。

我该怎么做？

LE： 更确切地说，我试图使用那些红色箭头来控制滚动。基本上，如果用户按下＆＃34; UP＆＃34;箭头，文本应在滚动框中向上滚动，类似于＆＃34; DOWN＆＃34;箭头。

Answer 1

我不确定你究竟要找什么，但如果你想要水平卷轴而不是vartical那么你应该试试这个：

     <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>