Como implementar uma caixa de texto com barras de rolagem em HTML

1. A barra de rolagem está na extremidade direita:

Pontos chave:

overflow-y: auto (indicando para abrir o controle deslizante à direita) ou overflow-x: hidden (indicando para ocultar o controle deslizante abaixo)

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

ou

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

 

2. A barra de rolagem está na parte inferior:

Pontos chave:

overflow-x: auto (indicando para abrir o controle deslizante inferior) ou overflow-y: hidden (indicando para ocultar o controle deslizante direito)

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

ou

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

 

Três, a parte inferior direita e a parte inferior da barra de rolagem têm:

Ponto-chave: overflow-x: auto overflow-y: auto (indicando para abrir o controle deslizante à direita e abaixo) 

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