HTMLでスクロールバー付きのテキストボックスを実装する方法

1.スクロールバーは右端にあります。

キーポイント：

オーバーフロー-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>

 

2.スクロールバーは下部にあります。

キーポイント：

オーバーフロー-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>

 

3つ目は、スクロールバーの右下と下に次のようなものがあります。

キーポイント：overflow-x：autoオーバーフロー-y：auto（左右のスライダーを開くことを示します） 

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