CSS 溢出概念和示例：如何解决水平滚动问题

在 CSS 中，当元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性为 overflow，它是属性 overflow-x 和 overflow-y 的缩写。

在本文中，我们将介绍这些功能，然后深入讨论与溢出相关的一些概念和用例。你准备好了吗你明白！

简介

要使用属性 overflow，我们需要确保使用它的元素具有以下属性：

• 块级元素（例如：） div 、 section），通过 height 或 max-height 设置高度。通过设置高度，我的意思是该元素必须有内容（不为空），也不是指添加明确的高度。
• 或将 white-space 设置为 nowrap。

Overflow元素有什么值？属性

overflow 可以具有接收属性。 ：

visible、hidden、scroll、auto

.element {
    height: 200px;
    overflow: [overflow-x] [overflow-y];
}
复制代码

由于overflow是一个简写属性，它可以取一个或两个值。第一个值用于水平轴，第二个值用于垂直轴。

可见

溢出 默认值为可见，其中内容可能会溢出其父值。可以这样设置：

.element {
    height: 200px;
    overflow: visible;
}
复制代码

有趣的是，当一个轴设置为可见，另一轴设置为auto时，可见轴将计算为auto。

MDN 是这么说的：

注：如果将一个轴设置为可见（默认值），并将另一轴设置为不同的值，则该轴设置将可见行为就会变成auto的行为。

例如，如果我们将元素设置为：

.element {
    height: 200px;
    overflow: visible auto;
}
复制代码

overflow，则计算出的属性值为auto。

大家都说简历上写不了项目，所以我帮你找了项目，还附上了【搭建教程】。

隐藏

当内容长于父内容时，将会被剪切。但是，可以使用 Javascript 浏览内容。

滚动

上图中，无论内容长短，滚动条始终可见。请注意，这取决于操作系统。

Auto

auto 这是一个智能关键字，仅当内容长于容器时才显示滚动条。

请注意，只有内容比容器长时，滚动条才在图片中可见。接下来，我们将讨论 overflow 属性 longhand

Overflow-X

该类型负责 x 轴或水平侧元件。

溢出-Y

此类型负责元素的 y 轴或垂直边。

用例和示例

简单滑块

可以通过水平裁剪内容并滚动来创建快速简单的滑块。

在上面的模型中，我们将卡片水平放置，并有一个滚动条用于滚动和显示更多内容。为此，我们需要执行以下操作：

• 在同一行中显示卡片，为此使用 flexbox
• 将 overflow-x

.wrapper {
    display: flex;
    overflow-x: auto;
}
复制代码

添加到容器 适用于桌面浏览器。但是，在 Safari 中测试 iOS(12.4.1) 时，滚动不起作用。经过一番尝试和错误后，当我为子级添加宽度时，滚动起作用了，并且在 iOS(13.3) 中没有任何问题。

示例源代码：codepen.io/shadeed/pen…

模态框内容

如果模态框内容太长，我们可以简单地启用区域滚动。为此，您应该执行以下操作

• 设置模态框角的最大高度

  当我们有一张卡片并希望其角是圆角时，我们通常将border-radius添加到顶角和底角，如下所示：

  .card-image {
      border-top-right-radius: 7px;
      border-top-left-radius: 7px;
  }
  
  .card-content {
      border-bottom-right-radius: 7px;
      border-bottom-left-radius: 7px;
  }
  复制代码

  这可能需要大量工作，特别是当卡片在移动设备上具有不同的设计时。例如，他们不会堆叠在一起，而是将他们的孩子堆叠起来。

  在这种情况下，最好通过执行 overflow:hidden 来隐藏它在包装器上，然后添加 border-radius，所以我们只需要设置它在一个城市就是这样。像这样：

  .card {
      overflow: hidden;
      border-radius: 7px;
  }
  复制代码

  动画

  说到动画，首选项是溢出：隐藏：悬停在剪辑上时可以显示的隐藏元素。考虑下面的图像：

  在 CSS 中，它看起来像这样：

  .button.slide-left {
      overflow: hidden;
  }
  
  .button.slide-left:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #000;
      opacity: 0.25;
      border-radius: 100px;
      transform: translateX(-100%);
      transition: 0.2s ease-in;
  }
  复制代码

  我们有两个按钮，每个按钮都有一个相应地向左和底部移动的伪元素。如下图：

  示例源码：codepen.io/shadeed/pen…

  大家都说简历上没有项目可写，所以我帮你找了一个项目，还附上了【搭建教程】。

  溢出常见问题解答：在移动设备上滚动

  例如，当我们有滑块时，仅添加 overflow-x 是不够的。在 Chrome iOS 中，我们必须手动滚动和移动内容。查看下面的 gif：

  幸运的是，有一个功能可以改善您的滚动体验。

  .wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }
  复制代码

  这称为基于动量的滚动。根据 MDN：

  -webkit-overflow-scrolling 该属性控制元素是否在移动设备上使用回滚效果。它有两个值：

  auto：使用正常滚动时，当您将手指从触摸屏上移开时，滚动会立即停止。 touch：使用弹跳效果滚动，当您将手指从触摸屏上移开时，内容会保留滚动效果一段时间。随后滑动的速度和持续时间与滑动行程的强度成正比。还会创建一个新的堆栈上下文。

  下图是基于动量的滚动效果。

  内联块元素

  根据 CSS 规范：

  将对象渲染为内联对象，但对象的内容渲染为块对象。一行中的相邻对象将呈现在同一行上，并留有空格。 （准确来说，应用了该属性的元素被渲染为一行

中的块元素，周围的元素保留在同一行中，但块元素的宽度和高度属性是可以设置的）

当值 overflow 不是 visible 时，这将导致元素的底边与其同级元素的文本基线对齐。

要解决这个问题，我们可以在主按钮上添加 overflow:hidden，并更改其对齐方式：

.button {
    vertical-align: top;
}  
复制代码

示例源代码：codepen.io/shadeed/pen…

水平滚动问题

水平滚动问题是常见问题，当原因不明时，滚动会变得更加困难。在本节中，我将列出水平滚动的一些常见原因，以便您在稍后构建布局时可以考虑它们。

位置是绝对/固定元素

当值位置元素是babsolute当为或固定值时，可能会导致水平滚动。当值之一left、right将元素放置在元素body

之外时，可能会发生这种情况要解决此问题，您必须首先检查原因该元素被放置在视线之外。如果不需要，应将其删除或编辑值位置。

网格项目

CSS网格 有三种情况会导致水平滚动。让我们来看看它们。

对列使用像素值

当视口宽度较小时，使用像素值会导致问题。请参见下文：

.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 1rem;
}
复制代码

解决方案是重置列并仅在具有足够空间的可见窗口上使用顶部列。

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    grid-template-columns: 200px 1fr;
}
复制代码

使用minmax()

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
}

复制代码

您可能会忘记测试移动设备，因为300px的最小宽度会在某些时候导致水平滚动。

一个简单的修复方法是将grid-template-columns重置为1fr并在视野更大时进行更改。

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
复制代码

源代码地址：codepen.io/shadeed/pen...

大家都说简历上没有项目可以写，所以我给大家找了一个项目，还附上了【搭建教程】。

长单词或链接

当您处理内容中的长单词或链接时，请保持滚动，否则会发生水平滚动。

要解决这个问题，我们需要打破长单词和链接。我们可以这样做

.post-content a {
    word-wrap: break-word;
}
复制代码

或者我们可以使用text-overflow：

.post-content a {
    overflow: hidden;
    text-overflow: ellipsis;
}
复制代码

如何解决水平滚动问题

现在我们知道了水平滚动的原因，我将介绍一些方法来帮助我们识别这些问题并解决它们。

使用CSS轮廓

*, *:before, *:after {
    outline: solid 1px #000;
}
复制代码

如果我们添加它们，我们可以看到哪些元素具有更大的宽度，这样我们就可以解决问题。 Addy Osmani 通过她的简单脚本更进一步：

[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
复制代码

此脚本随机化轮廓颜色，而不是为所有轮廓提供单一颜色，这将使事情变得更容易。

Firefox 滚动 标签

在 Firefox 中，会向导致水平滚动的元素添加一个小标签。

删除项目

有时上述技术不起作用。在这种情况下，我打开 DevTools 并开始删除项目并注意。一旦水平滚动消失，我就能够识别导致问题的元素。

最后的解决方案：使用overflow-x:hidden

最后，你可以使用overflow-x:hidden来解决水平滚动问题，但这通常是最后的手段。 。 ？商业转载请联系作者获得许可。非商业转载请注明来源。