javascript - 带有用于垂直滚动的水平控件的 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;
    }

下面是我正在努力实现的截图。

我该怎么做？

乐: 更准确地说，我正在尝试使用那些红色箭头来控制滚动。基本上，如果用户按下“向上”箭头，文本应该在滚动框中向上滚动，类似于“向下”箭头。

Answer 1

我不确定你到底在寻找什么，但如果你想要水平滚动而不是垂直滚动，那么你应该试试这个:

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