overflow:scroll与overflow:auto的区别

原创 已于 2022-02-08 17:50:27 修改 · 3.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #sass #vue.js

于 2022-01-14 19:00:54 首次发布
本文解析了CSS中overflow:scroll与overflow:auto的区别。当内容未超出容器时，auto隐藏滚动条，而scroll始终显示滚动条但禁用它。推荐使用auto以保持界面整洁。

首先我们需要了解到如何滑动内容

这就用到了一个属性：overflow

overflow: scroll;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow: auto;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

他们都可以加滚动条进行滑动，如果作用相同，为什么会出现两个？

那肯定是因为他们有所不同，先让我们去看一看，他们的效果是什么样子的：

第一个是使用scroll的 第二个是使用auto的

然后我们再看下一张进行对比

能够发现，高度超出的时候，auto的上下滚动条也出现了，scroll上下的滚动条也改变了状态

现在说说他们的区别：

当元素内容没有超出宽高时，

auto会隐藏滚动条，

scroll依旧显示滚动条，但会禁用该滚动条

所以，我个人建议多使用auto，相对美观

overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解
u013179804的博客
04-21 1万+
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
09-25
`overflow: scroll`是一个常见的值，它指示浏览器在内容超出元素边界时显示滚动条，允许用户通过滚动查看全部内容。然而，`overflow: scroll`默认情况下会在两个方向（水平和垂直）上启用滚动条。 如果你只想让元素...
overflow：auto的用法和实现弹性盒横向滚动
YY的博客
09-29 1万+
overflow：auto的用法、实现弹性盒横向滚动
【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-28 1978
一、清除浮动 - 父级元素设置 overflow 样式 二、父级元素设置 overflow 样式代码示例 三、overflow 属性样式效果 1、没有设置 overflow 的效果 2、overflow: hidden 溢出隐藏效果 3、overflow: auto 垂直进度条效果 4、overflow: scroll 水平垂直进度条效果
overflow：scroll和auto
时光留不住，毕竟东流去
04-09 3221
overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条始终可见，但被禁用。 overflow: auto 非常相似，但滚动条仅在内容溢出时出现 所占空间位置不同 overflow: scroll情况下，内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。 overflow: scroll 而overflow: auto情况...
overflow:auto与scroll区别
weixin_44941889的博客
11-09 3682
overflow: auto与scroll在内容超出时浏览器均会显示滚动条 但在元素没有超出时，auto会隐藏滚动条，scroll依旧显示滚动条，但是禁用该滚动条
ie7中overflow:auto无效的解决方法
12-13
产生原因当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:auto属性就会失效。 解决办法解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。 代码bug重现 ...
精选资源
微信小程序overflow:auto; ios设备卡顿问题
01-03
我们在开发微信小程序的时候，经常会使用到overflow:auto;来实现局部滚动效果，稍微注意的码有就会发现，ios真机设备上会有很明显的卡顿，但安卓设置就没这个问题。 解决方式 view{ overflow:auto; -webkit-...
css中position:relative和overflow:hidden之间的问题
09-25
`overflow`属性则用于处理内容溢出其容器时的显示方式，它可以设置为`visible`（默认值，允许内容溢出）、`hidden`（隐藏溢出内容）、`scroll`（添加滚动条以查看溢出内容）或`auto`（根据需要添加滚动条）。...
【css】 overflow scroll 和auto的使用差别
不足
01-20 3228
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。 overflow 属性可设置以下值： visible - 默认。溢出没有被剪裁。内容在元素框外渲染 hidden - 溢出被剪裁，其余内容将不可见 scroll - 溢出被剪裁，同时添加滚动条以查看其余内容 auto - 与 scroll 类似，但仅在必要时添加滚动条 当我们需要做一个限制高度，带滚动条的容器时，一般会使用 scroll 或 auto ，但这两个在展示上具体有哪些区别呢？ 下面的代码是使用了scrol
overflow： scroll
weixin_30662011的博客
10-11 125
overflow： scroll在安卓5.0的情况下，不论内容是否填满屏幕，都会强制解析出滚动条，所以最好是使用overflow： auto 转载于:https://www.cnblogs.com/wangqiao170/p/7650474.html...
overflow的四个属性（visible、hidden、scroll、auto）
宝子的博客
07-21 1314
visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承overflow属性的值。 ...
CSS - div之overflow:scroll
iteye_3352的博客
01-08 347
[color=green][b]Definition[/b][/color] The overflow property specifies what happens if content overflows an element's box. [color=green][b]Usage[/b][/color] [color=brown]Default value:[/col...
【前端基础】12、CSS的overflow（visible、hidden、scroll、auto）【注：只有最基础的说明。】
陌上人如玉，公子世无双。
05-21 577
用于控制内容溢出时的行为。：超出的部分正常显示（默认设定） ：超出的部分隐藏显示（直接裁剪掉） ：超出的部分滚动显示 滚动条占用高度（weight）、宽度（height） 注意：如果高度超过文本的实际高度了，让然会有滚动条。 ：超出的部分自动调整显示（自动决定是否使用滚动机制。） 如果文本高度小于设定的高度：文本自动根据情况显示。 如果文本高度大于设定高度：自动显示滚动条。
overflow: scroll隐藏滚动条的问题
热门推荐
sinat_25017107的博客
07-15 5万+
最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题。对于隐藏滚动条，我们最常用的方法首先是：1、使用以下CSS可以隐藏滚动条：.container::-webkit-scrollbar {display:none}但是要兼容其他浏览器的话这个就不太好用了，这个适用于Chrome2、为了兼容其他的浏览器，可以用这样的方法：在滚动区域外再套一层div，给这层div设置overflow:...
CSS overflow : visible | auto | hidden | scroll 区别
frank1998819
03-08 814
overflow : visible | auto | hidden | scroll 参数： visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 hidden : 　不显示超过对象尺寸的内容...
overflow:scroll 隐藏滚动条
qq_40137978的博客
10-27 2303
body::-webkit-scrollbar {display:none} 注： body可以改为具体class类
Overflow:auto解决scoll 问题
今天最成功
11-07 748
<html> <head> <style type="text/css"> .usb { width:100px; height:200px; } </style> <title>用户信息</title> </head> &a
前端随笔（二）——overflow：scroll详解
Dfox7_s的博客
04-11 1万+
overflow触发条件
overflow: scroll; 只允许上下滑动
最新发布
10-27
<think>首先，用户的问题是：如何让 `overflow: scroll;` 只允许上下滑动（即垂直滚动），而不允许左右滑动。用户提到了一些引用，但核心是找到解决方案。 回顾引用内容： - 引用[1]：解释了 `overflow: scroll;` 和 `overflow: auto;` 的作用，显示滚动条以查看被修剪的内容。 - 引用[2]：讨论了在iOS上使用 `overflow: scroll;` 导致的卡顿问题。 - 引用[3]：提到 `overflow: scroll;` 不起作用，并建议使用框架如 iscroll、better-scroll 或 me-scroll。 - 引用[4]：涉及iOS平滑移动的解决方案，提到了 iscroll 的 scrollToPage 方法。 用户的需求是让 `overflow: scroll;` 只允许上下滑动，意思是限制滚动方向为垂直方向。 在CSS中，`overflow: scroll;` 默认允许水平和垂直滚动，如果内容超过容器大小。要限制只允许垂直滚动，我需要使用其他属性。 正确的方法是使用： - 设置 `overflow-y: scroll;` 来只允许垂直滚动。 - 同时，设置 `overflow-x: hidden;` 来禁止水平滚动。 这样，容器只会在垂直方向上有滚动条，水平滚动被隐藏。 用户提到了 `overflow: scroll;`，但为了只允许上下滑动，我应该建议使用更精确的属性。 另外，引用[3]提到 `overflow: scroll;` 不起作用，并建议使用框架。这可能是因为在某些浏览器或设备上，特别是移动端，原生滚动行为可能有问题（如引用[2]提到的iOS卡顿问题）。如果用户遇到性能问题，我可以建议使用JavaScript库如 iscroll 或 better-scroll。 但用户的核心需求是限制滚动方向，所以优先给出纯CSS解决方案。 总结解决方案： 1. 使用CSS： ```css .container { overflow-y: scroll; /* 允许垂直滚动 */ overflow-x: hidden; /* 禁止水平滚动 */ } ``` 这将确保容器只上下滑动。 2. 如果遇到性能问题（如iOS卡顿），考虑使用JavaScript库如 iscroll 或 better-scroll。引用[3]和[4]提到了这些。 现在，构建回答： - 回答使用中文，因为系统指令要求。 - 结构清晰：先给出解决方案，然后解释。 - 引用相关段落：用户提供了引用，我需要自然地引用它们。例如，在提到iOS卡顿时引用[2]，在建议框架时引用[3]和[4]。 - 生成相关问题：系统指令要求生成相关问题，所以我需要添加在末尾。 回答结构： 1. 直接回答问题：如何限制滚动方向。 2. 给出CSS代码示例。 3. 如果有潜在问题（如iOS性能），提到并建议解决方案。 4. 引用相关引用。 5. 添加相关问题。 最终回答： - 开头：解释如何只允许上下滑动。 - CSS代码示例。 - 针对iOS卡顿的额外建议。 - 引用标识。 - 最后，生成相关问题。 </think>### 如何让 overflow: scroll 只允许上下滑动？ 要让 `overflow: scroll` 只允许上下滑动（即垂直滚动）并禁止左右滑动，您需要使用CSS的 `overflow-y` 和 `overflow-x` 属性精确控制滚动方向。以下是具体解决方案： #### 1. **纯CSS方法（推荐）** 通过设置 `overflow-y: scroll` 启用垂直滚动条，同时设置 `overflow-x: hidden` 禁用水平滚动： ```css .container { overflow-y: scroll; /* 启用垂直滚动条 */ overflow-x: hidden; /* 禁用水平滚动 */ height: 300px; /* 固定高度以触发滚动 */ width: 100%; /* 宽度自适应 */ -webkit-overflow-scrolling: touch; /* 针对iOS优化滚动流畅性 [^2] */ } ``` - **效果**：容器内容只会在垂直方向滚动，水平方向无法滑动。 - **注意事项**： - 在iOS设备上，直接使用 `overflow: scroll` 可能导致滑动卡顿[^2][^3]。添加 `-webkit-overflow-scrolling: touch;` 可改善流畅性。 - 如果需要兼容旧浏览器，确保测试主流环境（如Chrome、Safari）。 #### 2. **针对iOS性能问题的优化** 如果纯CSS在iOS上仍有卡顿问题（如引用[2][^2]所述），建议改用JavaScript滚动库，这些库能提供更流畅的体验并精确控制方向： - **使用 iscroll 或 better-scroll（引用[3][^4]推荐）**： ```javascript // 示例：使用 iscroll 限制只允许垂直滚动 import IScroll from 'iscroll'; const myScroll = new IScroll('.container', { scrollX: false, // 禁用水平滚动 scrollY: true, // 启用垂直滚动 bounce: false // 禁用边界回弹效果 }); ``` - 优点：解决iOS卡顿，且支持分页滚动（如引用[4][^4]的 `scrollToPage` 方法）。 - 替代方案：better-scroll 或 me-scroll 库（引用[3][^3]）。 - **为什么需要库？** 原生 `overflow: scroll` 在移动端可能存在性能缺陷，框架能通过硬件加速优化滚动行为[^2][^3]。 #### 关键点总结 - **核心原理**：CSS的 `overflow-y` 和 `overflow-x` 是控制滚动方向的标准方式。 - **iOS适配**：优先添加 `-webkit-overflow-scrolling: touch;`，若无效则采用滚动库。 - **引用说明**： - 引用[2][^2] 强调了iOS卡顿问题，需额外优化。 - 引用[3][^3] 和 [4][^4] 建议使用框架解决兼容性和性能问题。 此方法适用于大多数现代浏览器和移动设备。如需进一步调试，请提供更多上下文（如HTML结构）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值