overflow:scroll与overflow:auto的区别

阿巴的光之逆子

已于 2022-02-08 17:50:27 修改

阅读量3.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css sass vue.js

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

本文链接：https://blog.youkuaiyun.com/hellow_tommer/article/details/122499353

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

3177

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

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

overflow:auto与scroll区别

weixin_44941889的博客

11-09

3635

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

【前端基础】12、CSS的overflow（visible、hidden、scroll、auto）【注：只有最基础的说明。】

最新发布

陌上人如玉，公子世无双。

05-21

444

用于控制内容溢出时的行为。：超出的部分正常显示（默认设定）：超出的部分隐藏显示（直接裁剪掉）：超出的部分滚动显示滚动条占用高度（weight）、宽度（height）注意：如果高度超过文本的实际高度了，让然会有滚动条。：超出的部分自动调整显示（自动决定是否使用滚动机制。）如果文本高度小于设定的高度：文本自动根据情况显示。如果文本高度大于设定高度：自动显示滚动条。

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

不足

01-20

3095

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

overflow： scroll

weixin_30662011的博客

10-11

112

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

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

宝子的博客

07-21

1261

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

789

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

544

滚动条属性overflow

overflow:auto

07-28

overflow:auto是CSS属性，用于设置元素的溢出内容的处理方式。当元素的内容超出其指定的高度或宽度时，溢出内容会隐藏。然而，通过设置overflow:auto，元素将自动显示滚动条，以便用户可以滚动查看溢出的内容。如果元素的内容没有超出容器的尺寸，滚动条将不会显示。当内容超出容器尺寸时，滚动条将自动出现，允许用户滚动查看隐藏的内容。例如，假设有一个固定高度和宽度的 `<div>` 元素，并且其内容超出了其指定的尺寸。通过为该元素设置`overflow:auto`，将在需要时显示滚动条，以便用户可以滚动查看隐藏的内容。 ```css div { width: 200px; height: 200px; overflow: auto; } ``` 这样做可以确保元素的内容在超出容器尺寸时仍然可访问，并且不会影响其他元素的布局。