overflow:scroll与overflow:auto的区别

原创已于 2022-02-08 17:50:27 修改 · 3.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #sass #vue.js

于 2022-01-14 19:00:54 首次发布

css 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这就用到了一个属性：overflow

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

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

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

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

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

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

现在说说他们的区别：

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

auto会隐藏滚动条，

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿巴的光之逆子

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端面试：如何修改overflow:scroll 滚动条的默认样式-如背景色以及宽度

weixin_34309543的博客

04-20

1万+

如何修改overflow:scroll 滚动条的默认背景色以及宽度；使用-webkit-scrolbar 自定义样式；复制代码 talk is cheap ,show me the code: Title 所有主流浏览器都支持 overflow 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inh...

overflow：scroll和auto

时光留不住，毕竟东流去

04-09

3176

overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条始终可见，但被禁用。 overflow: auto 非常相似，但滚动条仅在内容溢出时出现所占空间位置不同 overflow: scroll情况下，内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。 overflow: scroll 而overflow: auto情况...

参与评论您还未登录，请先登录后发表或查看评论

overflow:auto与scroll区别

weixin_44941889的博客

11-09

3635

overflow: auto与scroll在内容超出时浏览器均会显示滚动条但在元素没有超出时，auto会隐藏滚动条，scroll依旧显示滚动条，但是禁用该滚动条

overflower的scrool属性

最新发布

weixin_69417769的博客

05-21

400

overflow:scroll 属性确实会在元素上强制显示滚动条,不管内容是否溢出都会出现滚动机制,这是该属性的标准行为。这个特性的设计初衷是为了保持页面布局的一致性。当内容可能动态变化时,预先显示滚动条可以避免布局的跳动,提供更好的用户体验。- 与overflow:auto的区别在于,auto只在需要时才显示滚动条。- 滚动条会占用一定的空间,这在计算元素实际可用空间时需要考虑。- 即使元素内容没有超出容器范围,也会显示水平和垂直滚动条。无论是否需要，用户代理都会提供一种滚动机制。

【css】 overflow scroll 和auto的使用差别

不足

01-20

3093

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。 overflow 属性可设置以下值： visible - 默认。溢出没有被剪裁。内容在元素框外渲染 hidden - 溢出被剪裁，其余内容将不可见 scroll - 溢出被剪裁，同时添加滚动条以查看其余内容 auto - 与 scroll 类似，但仅在必要时添加滚动条当我们需要做一个限制高度，带滚动条的容器时，一般会使用 scroll 或 auto ，但这两个在展示上具体有哪些区别呢？下面的代码是使用了scrol

overflow： scroll

weixin_30662011的博客

10-11

111

overflow： scroll在安卓5.0的情况下，不论内容是否填满屏幕，都会强制解析出滚动条，所以最好是使用overflow： auto 转载于:https://www.cnblogs.com/wangqiao170/p/7650474.html...

overflow的四个属性（visible、hidden、scroll、auto）

宝子的博客

07-21

1260

visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承overflow属性的值。 ...

CSS - div之overflow:scroll

iteye_3352的博客

01-08

326

[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...

CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

09-25

`overflow: scroll`是一个常见的值，它指示浏览器在内容超出元素边界时显示滚动条，允许用户通过滚动查看全部内容。然而，`overflow: 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-...

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

788

overflow : visible | auto | hidden | scroll 参数： visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 hidden : 　不显示超过对象尺寸的内容...

overflow:scroll 隐藏滚动条

qq_40137978的博客

10-27

2288

body::-webkit-scrollbar {display:none} 注： body可以改为具体class类

Overflow:auto解决scoll 问题

今天最成功

11-07

738

<html> <head> <style type="text/css"> .usb { width:100px; height:200px; } </style> <title>用户信息</title> </head> &a

前端随笔（二）——overflow：scroll详解

Dfox7_s的博客

04-11

1万+

overflow触发条件

div overflow scroll_overflow属性

weixin_39980575的博客

11-30

2670

定义：Overflow属性，规定了当内容溢出元素框的时候内容如何处理的事情2. 注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"3. 属性介绍scroll ：如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。如下图所示，宽度够的时候，设置属性为scroll, 仍然会出...

滚动条属性overflow

m0_69876298的博客

08-13

542

滚动条属性overflow

uni-popup 中设置 overflow:scroll

02-27

### 如何在 `uni-popup` 中设置 `overflow-scroll` 实现内容滚动当尝试在 `uni-popup` 组件中实现滚动效果时，可能会遇到一些问题。特别是在 H5 和 App 端表现不一致的情况下，这通常是由默认事件处理引起的。 #### 修改默认事件处理官方代码中的 `@touchmove.stop.prevent="clear"` 事件阻止了触摸滚动行为，因此需要移除该事件绑定以恢复正常的滚动功能[^1]： ```html <template> <view class="popup-content">  <scroll-view scroll-y style="height: 300px;">  </scroll-view> </view> </template> <style scoped> .popup-content { height: auto; } </style> ``` 通过上述修改，可以确保 `scroll-view` 或者具有 `overflow: scroll` 样式的容器能够正常工作。 #### 设置样式属性为了使滚动生效，还需要适当调整 CSS 样式来定义滚动区域的高度和其他必要参数: ```css /* 定义固定高度并启用垂直方向上的溢出滚动 */ .scrollable-area { max-height: 400rpx; /* 可根据实际需求设定具体数值 */ overflow-y: auto !important; } /* 防止某些情况下滚动条不可见 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .2); border-radius: 4px; } ``` 以上方法适用于大多数场景下的滚动需求，并且可以在不同平台间保持一致性。 #### 注意事项如果是在微信小程序环境中使用，则需要注意其特有的渲染机制可能会影响最终的效果显示。此时应参照相应框架文档进行针对性优化[^2]。对于更复杂的交互逻辑，比如涉及多个组件间的通信或状态管理，建议按照最佳实践方式构建应用结构，如给子组件添加独立的 `ref` 属性以便更好地控制它们的行为[^3]。最后，考虑到跨平台兼容性和性能因素，推荐优先选用原生支持良好特性的 UI 控件库版本，而不是自行定制解决方案[^4]。