开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

overflow auto不会使div可滚动引导

overflow:auto是CSS属性，用于控制元素内容溢出时的处理方式。当元素内容超出容器大小时，设置overflow:auto会在需要时显示滚动条来使内容可滚动。

它可以应用于任何具有固定尺寸的容器元素，如div。当内容超出容器尺寸时，如果设置了overflow:auto，浏览器会自动为容器添加水平和/或垂直滚动条，从而使内容可以滚动。

使用overflow:auto有以下几个优势：

提供可滚动的内容区域：当元素内容超过容器尺寸时，滚动条允许用户滚动以查看所有内容。
避免页面布局崩溃：当内容超出容器尺寸时，使用overflow:auto可以防止元素溢出，避免对其他元素造成布局问题。
增强用户体验：如果内容不适合单个屏幕，使用overflow:auto可以使用户能够滚动查看内容，而无需调整屏幕大小或缩放页面。

应用场景：

当需要在固定大小的容器中显示大量内容时，可以使用overflow:auto来创建可滚动的内容区域，以便用户能够浏览所有内容。
在网页设计中，常用于创建弹出框、模态框、侧边栏或导航菜单等容器，当内容超过容器尺寸时，可以通过设置overflow:auto来提供滚动功能。

推荐的腾讯云产品：腾讯云提供了一系列与云计算相关的产品，以下是一些推荐的产品：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CMQ）：https://cloud.tencent.com/product/cmq
云原生容器实例（TKE）：https://cloud.tencent.com/product/tke
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网平台（IoT）：https://cloud.tencent.com/product/iot
云存储COS：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯会议：https://cloud.tencent.com/product/tc-meeting

请注意，以上链接仅为腾讯云产品介绍页面，具体的产品使用和功能请参考腾讯云官方文档。

相关搜索:使用可滚动div时，左右边框消失(overflow: auto)在div overflow:auto上禁用垂直滚动条单击滚动到父div overflow auto内的特定部分引导行中的水平可滚动div 如何在使用overflow-y的父级中使div可滚动？我想只滚动一个div元素，但css overflow: auto不起作用如何使带有类消息的div元素可滚动？溢出: auto不显示滚动条，并且无法滚动div 尽管overflow设置为auto，但水平滚动条不会出现在DIV中如何在overflow设置为auto或scroll的情况下自动滚动(动画)带有文本的<div>？当我使用overflow:auto添加一个滚动条时，我的div不再是并排的如何设置div使用某个百分比的高度,同时使用overflow:auto来放置滚动条？"overflow-x: auto‘无法在CSS网格中处理表格以使其可滚动以获得响应，我该如何修复？Html:工具提示隐藏在带有滚动的分割屏幕上的div上(需要在父容器上保留"overflow-y:auto“)

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ios下滚动条默认显示

该文讲述了如何实现ios下滚动条默认显示，以及需要注意的样式和兼容性问题，并提供了一个demo示例。

06

DIV

div 设置滚动条显示：overflow :yes div 设置滚动条自适应显示：overflow :auto div 设置上下滚动条显示：overflow-y :yes div 设置上下滚动条自适应显示：overflow-y :auto 如果该

02

html中div加滚动条

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158145.html原文链接：https://javaforall.cn

02

使用 CSS Scroll Snap 优化滚动，提升用户体验！

作者：Ahmad 译者：前端小智来源：ishadee 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的

04

CSS深入理解学习笔记之overflow

1、Overflow基本属性　　overflow:visible(默认)/hidden/scroll/auto/inherit; 　　visible：超出部分可见。　　hidden：超出部分隐藏。　　scroll：超出可滚动。　　auto：若超出才出现滚动条。　　inherit：继承。（IE8+）　　注：overflow-x与overflow-y值不同，其中一个属性值被赋予visible，而另一个被赋值为hidden/scroll/auto，则visible会被重置为auto。兼容性：

05

↓↓↓ HTML如何局部滚动而头尾不滚动 ↓↓↓

兼容 android（4.3版本三星 note2）进行嵌套，没有引用任何插件，纯css。

01

div:给div加滚动条　div的滚动条设置

03

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？

06

【干货】使用 CSS Scroll Snap 优化滚动，提升用户体验！

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

03

如何把控css的方向感

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

01

css必知的几个底层知识和技巧

问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

02

[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动

最基础的思路就是表头和内容是用两个表格来显示（图来自https://zhuanlan.zhihu.com/p/33280304），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。

00

防御式CSS是什么？这几点属性重点防御！

很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。

03

「译」前端项目中常见的 CSS 问题

快速摘要：近年来，跨浏览器的渲染和交互已经愈加一致。不过，它仍然没有达到完全一致，有很多小问题会让你出错。除了这些问题之外，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素，我们从中发现了许多会让开发者出错的小问题。

01

html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」

这里向大家描述一下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。

02

学前端到了CSS阶段，你一定要掌握这9大防御式开发技能

防御性编程是一种细致、谨慎的编程方法（习惯）。我们在写代码时常会有“以防万一”的心态，把以防万一有可能出现的情况提前考虑进去，规避以免以防万一出现带来的问题。

00

只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！

长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。

01

使用CSS这个小技巧，可以让长列表网页的渲染性能提升几倍以上！

长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。

03

原生JS实现目录滚动特效

分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下：

02

CSS div隐藏滚动条「建议收藏」

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

02

HTML- white-space 和 overflow 两个重要的 CSS 属性

CSS的作用是给 HTML 元素添加样式和布局，接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下：

02

只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！

长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。

02

css3的一些属性--overflow 属性

如果在定义一个元素的时候，内容发生溢出这个时候可以用 overflow这个属性来做一些处理 div.ex1 { overflow: scroll; } div.ex2 { overflow: hidden; } div.ex3 { overflow: auto; } div.ex4 { overflow: visible; } visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会

03

css基础教程之布局属性

collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

02

我在移动web开发中遇到的各种问题

目前（2015年8月3日15:02:24）在大部分安卓手机都发现这个问题，触发bug的条件知道了，但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚动不是body的层下面（后面有具体解释）。

02

蒙层禁止页面滚动的方案

弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。

02

css元素溢出 overflow

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

02

css当中overflow用法

5.overflow 例 1.5 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div { background-color:#00FFFF; width:100px; height:100px; overflow: scroll } </style> </head> <body>

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

这个属性定义溢出元素内容区的内容会如何处理auto|visible|hidden|scroll。如果值为 scroll，即使元素框中可以放下所有内容也会出现滚动条。马克-to-win:auto最好。默认值是 visible，怎么都能看见。溢出也能看见。

</body> </html> 例 1.5_a <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div { background-color:#00FFFF; width:700px; height:50px; overflow: auto } </style> </head> <body>

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

03

CSS overflow 内容溢出时的显示方式

以前不知道 overflow 的滚动条样式是可以修改的，最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式，才得知还有这么个东西，在此记录一下自定义滚动条的写法，这样可以更好的理解用法，虽然下次使用还要来这里看

02

iframe关于滚动条的去除和保留(转载)

iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？

02

8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

前言开发每一张网页都离不开布局排版，基于良好布局排版打下基础，才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上，没办法解决的布局排版都用JS实现😂。今时不同往日，现代CSS属性能更好地快速实现各种布局排版，节约更多时间去摸鱼😉。不过按照笔者目前了解的情况来看，大部分同学即使在无需兼容IExplorer的情况下还是遵循CSS+JS的方式完成一些常见或特殊的布局排版。从HTML/CSS/JS前端三剑客的定位来看，HTML映射网页的「结构」，CSS映射网页的「表现」，JS映射网页

02

CSS3新特性应用之用户体验

一、光标新增加not-allowed光标，不允许访问隐藏光标，在触模应用上很有用，css2.1需要一个透明的图片来实现，而css3直接用cursor:none即可。完整代码： curosr: url(transparent.gif'); cursor: none; 二、扩大热区应用在小按钮的情况下，不好被鼠标点击到代码如下： .btn{ position: relative; cursor: pointer; } .btn:after{ position: absolute

08

清除浮动的几种方法

同样将此类名添加在浮动元素的父级身上与1.相比，是将伪类去替代div，感觉本质还是没变

02

弹窗查看内容时内容滚动区域设置为body区

看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到body区滚动

02

让div水平垂直居中的几种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。使用 CSS 实现水平居中很容易，但要实现垂直居中并不容易。而且有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的几种不同方法，以及它们各自的优缺点。

02

SCrollTOP scrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

02

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

01

【CSS】464- 5种 CSS 浮动和清除浮动的方法

1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认）

02

纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小

利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。

02

第107期：前端搜索列表中某一项并滚动到可视区域

标题中描述的场景适用于表单内容项很多，比如几十或者上百条的时候，需要我们滚动表单内容才能找到我们要想要修改的表单项。

02

CSS杂谈

本文没有什么高深的东西，就是写几个CSS样式经常遇见的东西，可能大部分都已经知道怎么解决了，当做小白文浏览就好。

02

移动页面滚动穿透解决方案（荐）

其次，设置 JS ，再点击按钮之后，将body 的 overflow:initial 即可。

03

CSS3之position/sticky使用

css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。

01

长列表优化：用 React 实现虚拟列表

大家好，我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。

01

2全屏布局<9>

全屏布局的特点： 1.布局撑满窗口，当浏览器变大的时候，布局也是充满浏览器的窗口 2.滚动条出现在内容区域

02

css属性及定位操作

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

05

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。在其他情况下，UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下，您可能有充分的理由来定制滚动条。例如，您可以定制滚动条样式以匹配网站的外观和感觉。

00

浏览器滚动条的自定义和隐藏

---- 我们在处理业务的时候，偶尔会因为某些非抵抗力因素，需要对浏览器的滚动条进行处理，以提升产品的体验。本文我们来谈谈关于浏览器滚动条的自定义和隐藏 😊 自定义滚动条首先，我们来认识滚动条的那些选择器。对于 webkit 内核的浏览器，滚动条有以下的选择器：名称用途 scrollbar 滚动条 - 占据指定的宽高 scrollbar-track 滚动条的轨道 scrollbar-corner 滚动条的底角，水平和垂直位置相遇的地方。 scrollbar-button 滚动条的上下按钮 mac 上俺

03

【React】【CSS】【案例】：Flex 弹性盒模型

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

04

用vue实现一个虚拟列表

上次分享了超长列表分片加载的方式，这种方式现在一般不会使用，因为dom会变的无比庞大，页面会很卡，今天分享用vue实现一个虚拟列表的简易实现，本来是想用原生实现一个，后来觉得直接使用computed，简单一些。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭