具有水平控件的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：更准確地說，我正在嘗試使用那些紅色箭頭來控制滾動。 基本上，如果用戶按下“向上”箭頭，則文本應在滾動框中向上滾動，對於“向下”箭頭也應類似。

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>