CSS Horizontal Scroll

对于窄容器，需要使用 CSS 实现水平滚动。如果长尺寸数据显示在小容器中，则可以使用滚动条来轻松获取所有内容。我们可以使用 CSS 实现垂直或水平滚动，但在这里，我们看到的是使用 CSS 实现的水平滚动条。水平滚动是从左到右滑动的条来显示内容。我们可以为表格、div 标签、带内容的图片等添加水平滚动。有两种方法可以在 CSS 中实现水平滚动。

• 使用 CSS overflow-x: auto 配合或不配合 overflow-y: hidden
• 使用 overflow: auto; 属性
• 使用 CSS overflow: scroll 属性

使用 CSS overflow-x: auto 配合或不配合 overflow-y:hidden

水平滚动需要一个 overflow 方法，并配合 x 和 y 轴来设置滚动条。overflow-x 属性用于 auto 值，而 overflow-y 轴用于 hidden 值。

语法

下面的语法显示了带有必需值的 overflow-x 和 overflow-y 属性。

示例

下面的示例展示了使用 CSS 中的 overflow 属性实现的水平滚动。

示例 1

该示例展示了使用 CSS 属性实现的简单水平滚动。

输出

输出显示了使用 CSS 实现的水平滚动。

示例 2

该示例使用 CSS 属性实现了水平滚动。我们可以设置高度并仅使用 overflow-x 属性。

输出

输出显示了使用 CSS 实现的水平滚动。

使用 CSS "overflow: auto;" 属性

CSS 使用许多属性来创建滚动并在网页上显示。overflow 属性与容器的宽度一起使用 auto 值。

语法

下面的语法显示了用于水平滚动的 overflow auto 属性。

示例

下面的示例展示了使用 CSS 中的 overflow: auto 属性实现的水平滚动。

示例 1

该示例展示了使用 CSS 属性实现的简单水平滚动。基本的水平滚动从左到右方向工作。我们不需要使用轴的 overflow 来实现水平滚动。

输出

输出显示了使用 CSS 实现的水平滚动。

示例 2

该示例使用 CSS 属性展示了简单和自动水平滚动。在这里，滚动条从右向左滚动。

输出

输出显示了使用 CSS 实现的水平滚动。

使用 CSS "overflow-x: scroll" 属性

CSS 使用 overflow-x 属性和 scroll 值在网页上显示滚动条。我们可以为容器要求使用 overflow-y hidden 属性；否则，使用 overflow-x 属性。

语法

下面的语法显示了用于水平滚动的 overflow scroll 属性。

示例

下面的示例展示了使用 CSS 中的 overflow: scroll 属性实现的水平滚动。

示例 1

该示例使用 CSS 属性展示了简单的水平滚动。此属性在网页上像 x 轴的普通 overflow 一样工作。

输出

输出显示了使用 CSS 实现的水平滚动。

示例 2

该示例使用 CSS 属性展示了简单的水平滚动。我们可以为 body 标签使用水平滚动条。它根据设备的内容长度和宽度显示滚动条。它作为响应式水平滚动与信息一起工作。

输出

输出显示了使用 CSS 实现的水平滚动。

使用 CSS 禁用水平滚动

使用 CSS 属性和值禁用水平滚动。在 style 标签中将 overflow-x 属性设置为 hidden 值以关闭滚动标签。

语法

下面的语法用于在 CSS 中关闭水平滚动。

示例

下面的示例展示了禁用的水平滚动。

输出

输出显示了禁用水平滚动的容器。

结论

CSS 水平滚动在最小宽度容器中显示大尺寸内容。它有助于用户和开发人员维护网页应用程序。