HTML滚动框，带有垂直滚动的水平控件 [英] HTML Scroll Box with horizontal controls for vertical scrolling

问题描述

我想从滚动框中移动控件，从框右侧的默认垂直位置，它下面的某处。我的代码到目前为止：

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.

我如何做到这一点？

LE：
更准确地说，我想使用那些红色箭头以控制滚动。基本上如果用户按下向上箭头，则文本应当在滚动框中向上滚动，并且对于向下箭头类似。

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.

推荐答案

我不知道究竟是什么寻找，但如果你想水平滚动而不是vartical， ：

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>

这篇关于HTML滚动框，带有垂直滚动的水平控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！