HTML如何实现带有滚动条的文本框

一、滚动条在右端:

关键处：

overflow-y:auto（表示开启右方的滑动条）或者overflow-x:hidden（表示隐藏下方的滑动条）

  <div style="width: 100px;height: 100px; overflow-x:hidden;">
        <p>ZTY</p>
        <p>LPJ</p>
        <p>LXH</p>
    </div>

或者

  <div style="width: 100px;height: 100px; overflow-y:auto;">
        <p>ZTY</p>
        <p>LPJ</p>
        <p>LXH</p>
    </div>

 

二、滚动条在下端:

关键处：

overflow-x:auto（表示开启下方的滑动条）或者overflow-y:hidden（表示隐藏右方的滑动条）

    <div style="width: 100px;height: 200px; overflow-x:auto;">
        <p>ZTYisxxyearsoldnowhhh</p>
        <p>LPJisxxyearsoldnowhhh</p>
        <p>DYisxxyearsoldnowhhh</p>
    </div>

或者

    <div style="width: 100px;height: 200px; overflow-y:hidden;">
        <p>ZTYisxxyearsoldnowhhh</p>
        <p>LPJisxxyearsoldnowhhh</p>
        <p>DYisxxyearsoldnowhhh</p>
    </div>

 

三、滚动条右端下端都有:

关键点：overflow-x:auto   overflow-y:auto （表示开启右方和下方的滑动条） 

    <div style="width: 100px;height: 100px; overflow-x:auto ;overflow-y: auto;">
        <p>ZTYisxxyearsold</p>
        <p>LPJisxxyearsold</p>
        <p>DYisxxyearsold</p>
    </div>