How to implement a text box with scroll bars in HTML

1. The scroll bar is at the right end:

Key points:

overflow-y:auto (indicating to open the slider on the right) or overflow-x:hidden (indicating to hide the slider below)

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

or

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

 

2. The scroll bar is at the bottom:

Key points:

overflow-x:auto (indicating to open the lower slider) or overflow-y:hidden (indicating to hide the right slider)

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

or

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

 

Three, the bottom right and bottom of the scroll bar have:

Key point: overflow-x:auto overflow-y:auto (indicating to open the slide bar on the right and below) 

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