css滚动条不占⽤宽度_CSS中关于Overflow，你需要了解的这
些知识点
在CSS中，当⼀个元素的内容太⼤⽽⽆法容纳时，我们可以对其进⾏控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。
在本⽂中，将会介绍这些属性，然后我们将⼀起深⼊讨论与overflow相关的⼀些概念和⽤例。你准备好了吗？get it!
简介
要使⽤overflow属性，我们需要确保将其应⽤到的元素具有以下特征：
块级元素(例如:div、section)，通过height或max-height设置⾼度。通过设置⾼度，我的意思是项⽬应该有内容(不是空的)，也不是添加⼀个显式的⾼度。
或将white-space设置为nowrap 的元素
Overflow 有哪些值
overflow属性可以有如下属性：
❝
visible, hidden, scroll, auto
❞
.element {    height: 200px;    overflow: [overflow-x] [overflow-y];}
由于overflow是⼀种简写属性，因此它可以接受⼀个或两个值。第⼀个值⽤于⽔平轴，第⼆个值⽤于垂直轴。
Visible
overflow 默认值为 visible，其中的内容可以超出其⽗值。可以这样设置:
.element {    height: 200px;    overflow: visible;}
有趣的⼀⾯是，当⼀个轴设置为visible，⽽另⼀轴设置为auto时，visible的轴将计算为auto。
[MDN][2] 上这样说到：
❝
注意: 设置⼀个轴为visible(默认值)，同时设置另⼀个轴为不同的值，会导致设置visible的轴的⾏为会变成auto`。
❞
例如，如果我们⽤以下内容设置⼀个元素:
.element {    height: 200px;    overflow: visible auto;}
overflow属性的计算值将为auto auto。
Hidden
当内容⽐其⽗内容长时，它将被剪切。但是，可以使⽤ Javascript 滚动内容。
Scroll
在上图中，⽆论内容是否长，滚动条总是可见的。注意，这取决于操作系统。
Auto
auto这是⼀个聪明的关键字，仅当内容⽐其容器长时才显⽰滚动条。
注意，在图中，只有当内容⽐其容器长时，滚动条才可见。接下来，我们将讨论与overflow相关的longhand属性
Overflow-X
该家伙负责x轴或元素的⽔平边。
Overflow-Y
该家伙负责y轴或元素的垂直边。
⽤例和事例
简单滑块
我们可以通过⽔平裁剪内容并使其滚动来创建快速简单的滑块。
在上⾯的模型中，我们有⽔平放置的卡⽚，还有⼀个滚动条，可以滚动并显⽰更多内容。为此，我们需要执⾏以下操作：将卡⽚显⽰在同⼀⾏，为此使⽤flexbox
向容器中添加overflow-x
.wrapper {    display: flex;    overflow-x: auto;}
它可以在桌⾯浏览器上⼯作。然⽽，在Safari上对iOS(12.4.1)进⾏测试时，滚动并没有起作⽤。经过反复试验，当我为⼦项添加宽度时，滚动起作⽤了，在iOS(13.3)上运⾏就没有问题啦。
模态框内容
当模态内容太长时，我们可以很容易地使区域可滚动。要做到这⼀点，我们应该做到以下⼏点
css设置表格滚动条
设置模态框的最⼤⾼度
模态框 body 应占⽤全部可⽤空间
.modal {    display: flex;    flex-direction: column;    max-height: 400px;    max-width: 450px;}/* 1. 让模态框 body 占据剩余的可⽤空间 *//* 2. 如果内容很长，则允许滚带有圆⾓的卡⽚
当我们有⼀张卡并且希望其⾓是圆的时，我们倾向于为顶部和底部的⾓添加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: 7
这可能需要很多⼯作，特别是如果卡⽚在移动设备上具有不同的设计。例如，它们不会彼此堆叠，⽽不是堆叠其⼦项。
在这种情况下，最好使overflow: hidden将其隐藏在包装器上，然后向其添加border-radius，这样我们只需要设置⼀个地⽅就⾏了。如下
所⽰：
.card {    overflow: hidden;    border-radius: 7px;}
动画
当涉及动画时，overflow: hidden的好处是：在剪辑时可以悬停显⽰的隐藏元素上。考虑下图：
在CSS中，如下所⽰：
.button.slide-left {    overflow: hidden;}.button.slide-left:after {    content: "";    position: absolute;    left: 0;    top: 0;    right: 0;    bottom: 0;    background: #00我们有两个按钮，每个按钮都有⼀个伪元素，该元素相应地过渡到左侧和底部。如下所⽰：
Overflow的常见问题：在⼿机上滚动
例如，当我们有⼀个滑动条时，仅仅添加overflow-x是不够的。在「Chrome iOS」上，我们需要⼿动滚动和移动内容。看下⾯的动图：
幸运的是，有⼀个属性可以增强滚动体验。
.wrapper {    overflow-x: auto;    -webkit-overflow-scrolling: touch;}
这称为「基于动量的滚动」。根据MDN：
「-webkit-overflow-scrolling」 属性控制元素在移动设备上是否使⽤滚动回弹效果。它有两个值：
「auto」：使⽤普通滚动, 当⼿指从触摸屏上移开，滚动会⽴即停⽌。「touch」：使⽤具有回弹效果的滚动, 当⼿指从触摸屏上移开，内容会继续保持⼀段时间的滚动效果。继续滚动的速度和持续的时间和滚动⼿势的强烈程度成正⽐。同时也会创建⼀个新的堆栈上下⽂。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。