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

最新推荐文章于 2024-07-29 09:26:52 发布

米咔米苏的零食

最新推荐文章于 2024-07-29 09:26:52 发布

阅读量2.5w

点赞数 10

分类专栏：前端文章标签： html html5 前端

本文链接：https://blog.csdn.net/Zhongtongyi/article/details/106197745

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、滚动条在右端:

关键处：

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>