如何使带有类消息的div元素可滚动？溢出: auto不显示滚动条，并且无法滚动div - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

您可以设计您的侧边栏以显示可滚动的导航项目列表。...在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：a）创建带有导航项目的导航栏b）将导航栏样式设置为侧边栏c）将侧边栏位置设置为固定d）使用滚动条管理项目的溢出a)....创建带有导航项目的导航栏为了创建导航栏，我们将使用HTML nav元素。...下面的截图显示了具有自定义样式的默认滚动条：样式化的默认滚动条下面的代码片段显示了如何使用body标签为滚动条添加样式： body::-webkit-scrollbar{ width...为了实现所有滚动条的统一定制，我们可以按如下方式应用样式：在不选择任何特定元素、标签或类名的情况下应用滚动条样式在网站同时具有水平和垂直滚动条的情况下，为两个属性的height和width同时赋值。

1K0 0

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

2. scrollWidth和scrollHeight 2.1 概念 element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。...element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。...2.2 实例在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth...element.scrollTop ：返回元素上边缘与视图之间的距离。我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息，微信消息也是这样的呀！...我们需要滑动滚动条来查看完整的视图，这个时候scrollLeft 和scrollTop就出现了，其实实际项目中我们是需要用到client和scroll这两大属性来自动的滑动滚动条，比如来新消息的时候，滚动条自动往下滑动到底部以便查看新消息

2.4K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS笔记(15)

本质:让一个元素在页面中隐藏或显示出来. 1.display属性 display属性用于设置一个元素应如何显示....属性值描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容与否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局....这是溢出的效果,相当于visible: hidden的效果 scroll的效果当内容过多溢出时auto的效果当内容不溢出时auto的效果,简单来说就是按需..../images/tudou.jpg" alt=""> 关于鼠标经过时的效果,使用伪类hover时一定要注意,是将鼠标移动到大盒子时才出现遮罩层,

1.1K1 0

CSS第五天-定位

---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动可以直接加宽高，默认宽度是内容宽度脱离标准流，在页面不占有位置解决分辨率问题有两种方法… ---- 定位层级...给外面标准流的父元素设置宽度和margin：0 auto 定位元素 === left: 50% translateX(-50%) 溢出隐藏：overflow 默认值 overflow: visible...溢出部分溢出 overflow: hidden 无论是否溢出，都显示滚动条overflow: scroll 根据是否溢出，自动显示或隐藏滚动条 overflow: auto white-space:...(-50%) 行内元素、行内块元素、并列关系的垂直居中对齐设置vertical-align: middle ---- 垂直的用法：文本框和表单按钮无法对齐 input和img无法对齐 div中的文本框...，文本框无法贴顶问题 div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题使用line-height和vertical-align: middle 让img标签垂直居中问题 ----

2.7K4 0

CSS深入理解学习笔记之overflow

scroll：超出可滚动。　　auto：若超出才出现滚动条。　　inherit：继承。...2、Overflow与滚动条 滚动条的出现条件：①auto/scroll；②内容超过盒子。...滚动条的宽度机制：　　　　滚动条会占用容器的可用宽度或高度。 ?...resize的拖拽区域默认大小是17px * 17px。滚动条的尺寸也是17px。　　文本溢出省略号显示属性text-overflow:ecllipsis。...（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。　　　　前提：①容器可滚动；②锚点元素在容器内。

3.7K5 0

Day8:html和css

auto 自动超出的就显示滚动条,不超出不显示 scroll 总是显示滚动条 用户界面: cursor鼠标样式 default 小白 text 文本 move 移动 pointer 小手...position: static; 叠放次序（z-index）元素的显示与隐藏 display visibility 和 overflow display 显示 display 设置或检索对象是否及如何显示...visibility 可见性设置或检索是否显示对象。 overflow 溢出检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 visible : 　不剪切内容也不添加滚动条。...auto : 　超出自动显示滚动条，不超出不显示滚动条 hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 　不管超出内容否，总是显示滚动条 鼠标样式cursor...，而是简单的裁切 ellipsis : 　当对象内文本溢出时显示省略标记（...）

1.7K4 0

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

，只有内容溢出时才显示*/ overflow-y: auto; } /* 整个滚动条*/ .content::-webkit-scrollbar { width...当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。我们可以元素添加scrollbar-gutter:stable;来避免这个问题。...，只有内容溢出时才显示*/ overflow-y: auto; /*预留好滚动条位置，必免引起重排*/ scrollbar-gutter: stable; }...当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。...; overflow-y: auto; background-color: skyblue; /*当滚动到滚动条底部和顶部时，会触发父元素的滚动条滚动*/

1.8K0 0

css元素溢出 overflow

2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。 3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 5、inherit 规定应该从父元素继承 overflow 属性的值。下面来逐个演示一下元素溢出的处理情况。...当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。浏览器显示如下： ?...用scroll来设置滚动条 ? 可以从上面看出有两条滚动条，很明显下方的滚动条是不需要的，如果只要一边的滚动条就好了，该怎么做呢？用auto来自动判断设置滚动条 ?...可以看出，只有右边有滚动条了，因为判断只有下方有溢出部分，所以只要有右边滚动条就可以往下拖拉查看了。

3.4K2 0

前端课程——显示与隐藏

内容是文本内容、一张图片和其他元素，超出指定容器元素的范围。如图情况一（容器元素div内容是文本） ? 情况二（指定元素中的图片超出元素范围） ?...隐藏的部分不会被看到 scroll:内容会被修剪，浏览器会显示滚动条以便查看其余内容。...始终提示滚动条，效果不好 auto：浏览器决定如果内容溢出，提供相应的滚动条；没有溢出不做任何处理 overflow-x属性水平方向上的溢出 visible: 默认值。...内容不会被修剪，会显示在父级容器之外。 hidden:内容会被修剪，并且其余内容不可见。. scroll: 内容会被修剪，浏览器会显示滚动条以便查看其余内容。...auto: 由浏览器决定，如果内容被修剪，就会显示滚动条。 overflow-y相似。 text-overflow text-overflow属性确定如何向用户发出未显示的溢出内容信号。

2.9K3 1

前端知识点总结（html+css）（上）

（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...visibilty:hidden //隐藏对应元素，在文档中仍保留位置 opacity：0 //隐藏元素，占位置，可添加事件 9. css中的overflow属性 scroll //必会出现滚动条...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....溢出文字的省略显示单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记...初始化css的方式 * { padding：0； margin：0； } 12. 如何使英文单词发生词内断行 word-wrap:break-word。

2651 0

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

自定义 overflow 的滚动条 1. overflow 属性介绍 ---- css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。...当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值描述 visible 默认值。...内容不会被修剪，溢出部分会呈现在元素框之外 hidden 内容被修剪，溢出部分不可见 scroll 内容被修剪，无论是否溢出滚动条都会占据空间 auto 当内容溢出时会被修剪且出现滚动条，没有溢出时不显示滚动条...自定义 overflow 的滚动条 ---- 以前不知道 overflow 的滚动条样式是可以修改的，最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式，才得知还有这么个东西，在此记录一下自定义滚动条的写法...class="item">4 5 macOS 中滚动条的默认样式: 可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式

2.2K2 0

css基础教程之布局属性

span a block 指定对象为块元素 div inline-block 指定对象为内联块元素 flex 将对象作为弹性伸缩盒显示。...div{display:block;} span{display:inline;} 二、float 浮动 none 设置元素不浮动 left 设置元素浮在左边 right 设置元素浮在右边....div{visibility:visible;} 五、overflow 内容溢出处理可以分拆：overflow-x,overflow-y 元素定义宽高之后生效 visible 对溢出内容不做处理...hidden 隐藏溢出容器的内容且不出现滚动条。 scroll 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。...auto 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。 .over{overflow:auto;}

5012 0

Day7:html和css

清除浮动的方法额外标签法,在最后一个浮动元素后面添加一个空的标签代码: 使用after伪元素进行清除浮动. .clearfix:after...(...) ellipsis: 当对象内文本溢出,显示(....)...: 不剪切内容也不添加滚动条。...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 鼠标样式cursor cursor...90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生 https://www.jianshu.com/u/c785ece603d1 结语下面我将继续对其他知识

1.9K3 0

css当中overflow用法

height:100px; overflow: scroll } 如果元素中的内容超出了给定的宽度和高度属性...，overflow 属性可以确定是否显示滚动条等行为。... 这个属性定义溢出元素内容区的内容会如何处理auto|visible|hidden|scroll。如果值为 scroll，即使元素框中可以放下所有内容也会出现滚动条。...马克-to-win:auto最好。默认值是 visible，怎么都能看见。溢出也能看见。... 如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

9873 0

CSS学习记录及整理

基础选择器 .class--选中html中类名为class的所有元素 #id--选择id为某值的所有元素 *--通配符，选择所有元素 element--选择某元素，比如p/div/span等 div1,...div2--逗号，并列关系，选中所有列出的元素 div1 div2--空格，下属关系，选中div1内所有的div2元素 div1>div2--大于号，父子关系，选中所有父元素为div1的div2元素 div1...+div2--加号，兄弟关系，选中所有紧跟在div1后面的所有div2元素属性选择器 [attribute]--选择带有某属性的所有元素 [attribute^=value]--例子：a[src^="...，值为:none/block/inline/inline-block等，用于将显示属性转换 float--浮动 left左浮动 right右浮动 none默认，不浮动 inherit继承父元素的属性 overflow...--内容溢出时是否修剪 visible默认值，不会修剪，溢出部分会显示在框外 hidden隐藏，溢出部分会修剪掉 scroll内容会被修剪，始终显示滚动条 auto如果内容被修剪，则显示滚动条 inherit

6.9K8 0

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

下面我们看一下使对象垂直集中的几种不同方法，以及它们各自的优缺点。表格布局这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align 属性。...因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。...div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 追加元素这种方法，在 content 元素外插入一个 div。.../div> 优点：适用于所有浏览器没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现缺点：唯一我能想到的就是需要额外的空元素了，可能对于某些强迫症患者来说是不愿意的...使用 margin:auto;使块级元素垂直居中是很简单的。

2.1K2 0

css控制滚动条透明,CSS控制滚动条样式的解析

我们在之前的两篇文章中，我们给大家介绍了关于CSS设置div滚动条样式、以及CSS3自定义滚动条样式的实例，都知道当内容超出容器时，容器会出现滚动条，那我们如何使用CSS控制滚动条样式的呢？...例子：/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。...下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/ /*定义滚动条轨道*/ #style-2::-webkit-scrollbar-track { background-color...，又达到不显示滚动条的目的。...使用该值时，无论设置的”width”和”height”的值是多少，其中的内容无论是否超出范围都将被强制显示。 overflow：auto；在需要时剪切内容并添加滚动条。

5.8K2 0

何为 content-visibility？

（这里需要注意的是，跳过的是内容的渲染） content-visibility: auto：如果该元素不在屏幕上，并且与用户无关，则不会渲染其后代元素。...基于这种场景，content-visibility: auto 就应运而生了，它允许浏览器对于设置了该属性的元素进行判断，如果该元素当前不处于视口内，则不渲染该元素。...好，我们实际开始进行滚动，看看会发生什么：由于下方的元素在滚动的过程中，出现在视口范围内才被渲染，因此，滚动条出现了明显的飘忽不定的抖动现象。...那么实际的滚动效果，滚动条就是抖动的：所以，我们可以同时利用上 contain-intrinsic-size，如果能准确知道设置了 content-visibility: auto 的元素在渲染状态下的高度...: auto 元素的高宽，可以有效的避免滚动条在滚动过程中的抖动； content-visibility: auto 无法直接替代 LazyLoad，设置了 content-visibility: auto

1.5K1 0

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

防止图像被拉伸或压缩在无法控制图片高宽比的情况下，如果用户上传的图片与高宽比不符，最好提前考虑并提供解决方案。在下面的例子中，我们有一个带有照片的卡片组件。它看起来不错。...我们可以控制显示滚动条或不只是在有很长的内容的情况下。...作为用户，在不需要滚动条的情况下看到滚动条是很混乱的。 .element { overflow-y: auto; } 使用overflow-y: auto，滚动条只有在内容较长时才可见。...这些滚动条通常是不透明的，并从相邻的内容中占用一些空间。请看下图: 请注意，由于显示了滚动条，当内容变长时，它是如何移位的。我们可以通过使用scrollbar-gutter属性来避免这种行为。...CSS网格中的最小内容尺寸与flexbox类似，CSS grid对其子项目有一个默认的最小内容尺寸，即auto。这意味着，如果有一个元素比网格项大，它将溢出。

4.3K3 0

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

3.如何让元素支持height:100%效果知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box 方法如下： * 1.设置显示的高度值 *...，padding对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠...则不会，此时可以通过margin-bottom实现滚动容器的底部留白其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding...box尺寸时触发滚动条显示 2.margin合并条件块级元素，但不包含浮动和绝对定位元素在默认文档流下只出现在垂直方向 margin合并的三种场景相邻兄弟元素父级和第一个/最后一个子元素 *...端滚动条宽度约为17px 让页面滚动条不出现晃动的方法: html{ /* ie8 */ overflow-y: scroll; } :root{ overflow-y: auto

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭