迹忆客 专注技术分享

本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动，并通过示例查看它们的实现。

使用 CSS overflow 属性使 HTML 中的 Div 可垂直滚动

使用 CSS overflow 属性可能是在 HTML 中使 div 可滚动的最简单方法。 当内容溢出 div 块时，溢出属性会派上用场。

我们可以使用该属性来剪辑内容并添加滚动条。 我们可以通过将 overflow 属性设置为 auto 来实现。

结果，div 的内容将被裁剪，并添加一个滚动条。 因此，我们将能够垂直滚动 div。

请注意 ，overflow 属性对未指定高度的 div 不起作用。

让我们看一下当内容超过指定的高度和宽度限制时的示例代码。

例如，创建一个名为 div1 的 div，其中包含一些虚拟内容。 在 CSS 中，将 div 的高度和宽度设置为 200px。

确保 div 中的虚拟文本长度超过 div 的长度。

示例代码：

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>

body{
    background: white;
}
.div1{
    height : 200px;
    width: 200px;
}

如果没有 overflow: auto; ，内容占用的空间比为其 div 分配的空间多。 这不是我们想要的，所以让我们使用 overflow 属性来管理内容。

示例代码：

body{
    background: white;
}
.div1{
    max-height : 200px;
    width: 200px;
    overflow: auto;
}

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>

使用 overflow: auto; 时，虚拟文本被裁剪到指定的宽度和高度，并出现一个滚动条，以便我们可以垂直滚动 div 以查看所有内容。 如果想要每次都出现滚动条，即使高宽够用，也可以使用 overflow-y:scroll; 反而。

因此，我们可以使用 CSS overflow 属性在 HTML 中创建一个可垂直滚动的 div。

使用 CSS overflow-y 属性使 HTML 中的 Div 可水平滚动

要使 div 水平滚动，我们需要做的就是保持 overflow-x: auto; 和溢出-y：隐藏； 使用额外的属性空白：nowrap;。 让我们在之前编写的 HTML 块中应用以下 CSS 属性。

例如设置一个分区div1的高度为100px。 然后如前所述设置溢出和空白属性。

如果内容超出 x 轴上的 div 尺寸，overflow-x: auto 属性可确保提供滚动条。

同样，将 overflow-y 设置为隐藏剪辑内容，并且在 y 轴上不保留滚动条。 我们为 white-space 属性使用了 nowrap 值来防止换行。

示例代码：

.div1{
    height : 100px;
    width: 300px;

    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>