css使用overflow属性控制滚动条的样式

最新推荐文章于 2024-05-21 00:00:00 发布
最新推荐文章于 2024-05-21 00:00:00 发布
阅读量2.6w 收藏 17
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012145816/article/details/72638862
版权
overflow: auto; 在需要时内容会自动添加滚动条 
overflow: scroll; 显示横、纵向滚动条 

overflow-x: hidden; 不显示横向的滚动条 

overflow-y: hidden; 不显示纵向的滚动条

overflow-x: scroll; 显示横向的滚动条

overflow-y: scroll; 显示纵向滚动条 


代码如下：

最低0.47元/天 解锁文章
lwlwptpt
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
动态div设置滚动条overflow-y: scroll
dishang1614的博客
11-14 6386
例子很简单，就是给没有height的div在一定高度时设置滚动条。 style部分： <style> .showInput{width: 300px;height: 30px;font-size: 20px;line-height: 30px;} .greyBox{position: fixed;top: 0;left: 0;width: 100%;heigh...
css：overflow-y: scroll内容未超出也显示滚动条
彭世瑜的博客
06-14 9752
原来的css设置如下 内容总是有一个距离没有撑满，发现是滚动条的问题，需要修改滚动条属性
CSS 滚动条设置：显示方式、样式修改
最新发布
大剑师兰特的GIS世界
05-21 1000
在CSS中，你可以通过`overflow`属性来控制元素内容溢出时是否显示滚动条，以及如何显示滚动条。同时，对于Webkit内核的浏览器（如Chrome和Safari），还可以定制滚动条的样式。以下是一些关于滚动条设置的详细说明及示例代码。
关于 overflow 滚动条(滑动条)配置，简单使用的案例和案例代码
youyudehan的博客
01-19 1315
简单了解关于滚动条(滑动条)的样式配置，了解其配置的注意事项，完成实现简单的样式配置实例。
css的overflow:scroll与ios
zhuhaomingoo的博客
10-30 1279
周末了，现在把上周所遇到的问题以及学到的一些新知识做一总结。在上次的一个混合开发中，我的H5页面嵌入到原生app,由于是静态页，跳转都是用Angular在原生里做的处理，数据过长在于是就是用了: css的“overflow-y:scroll;” 属性。在安卓系统中看页面无卡顿，滚动良好。可在ios系统中滚动卡顿甚至划不动的现象，原因是overflow：scroll；与ios自带的滚动相冲突取了
overflow-y没有超出高度，依然显示出滚动条
HDdgut的博客
03-26 325
即使内容不超过高度，也会出现右边的滚动条(max-height与height出现的滚动条长短不一样，渲染数据有时多有时少，使用max-height)。
为table设置滚动条，汇总CSS的overflow属性
Freya_yyy的博客
09-03 4064
做项目的时候有一个需求：让一个table的高度固定，这样多出来的内容需要在竖直方向显示滚动条。 遇到问题：table的宽度已经设置100%,td的宽度已设置。然后无论设置table的高度为多少，都不会出现竖直方向的滚动条。 解决方案： 为table设置一个父div,并设置父div的height属性为固定值； 为父div设置overflow-y: scroll; 1.overflow属性：C...
css 设置overflow:scroll 滚动条的样式
01-19
/* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 0px...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
DIV滚动条就是利用DIV标签，在里面嵌入CSS样式表，当div所定义的区域的内容达到一定程度时，在div标签里面嵌入CSS样式表，定义overflow的属性值，设置DIV滚动条相关的属性。 这里向大家描述一下DIV滚动条属性及样式...
CSS3自定义滚动条样式的示例代码
12-13
定义：overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。 属性值 overflow:visible //默认值。内容不会被修剪，超出内容会显示在元素框之外 overflow:hidden //内容会被修剪。超出内容...
overflow 监听是否滑动到底部
唐僧的专栏
05-18 1508
overflow 监听是否滑动到底部
css美化overflow:scroll的滚动条样式
rick_fbq的博客
04-08 1770
首先了解一下滚动条样式由哪些类名定义 ::-webkit-scrollbar //定义滚动条样式 ::-webkit-scrollbar-track //定义滚动条的滑道样式 ::-webkit-scrollbar-thumb //定义滑块儿的样式 通过修改这几个类的CSS属性就可以写出好看的滚动条 举个例子 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 10px; //定义滚动条宽度
overflow：auto出现滚动效果不显示滚动条
zkx529的博客
05-11 5137
问题描述 overflow：auto 子元素超过父元素高度或者宽度时会出现滚动条（需要设置高度和宽度），当我这么设置之后出现了滚动效果却没有滚动条。 问题原因 全局写了滚动条宽度为0。 ::-webkit-scrollbar : {width:0} 当我用样式覆盖后还是没有出现。 ::-webkit-scrollbar : {width:0} 可能原因是样式没有写完整。 解决办法 将样式写全 .printLogFather::-webkit-scrollbar { widt
CSS系列之详解overflow
老__L的博客
02-01 8792
本文主要介绍CSS的overflow、overflow-x、overflow-y属性。详解overflow
overflow出不来游览器滚动条的问题
qq_40946374的博客
01-08 1943
overflow不显示滚动条是因为position的fixed属性
解决H5在移动端overflow:scroll滚动条默认不显示和滚动后消失的问题
JulyNight的博客
05-17 6643
今天在工作中，遇到一个关于overflow滚动的问题，我在使用了overflow:scroll进行滚动时，滚动后滚动条自动消失了，需求是需要保留让它一直都在，下面的代码意思是重新设置滚动条的样式 .wf-detailScroll{ overflow-x: scroll; -webkit-overflow-scrolling: touch; } .wf-detailScroll::-webkit-scrollbar-track-piece { backgr
使用uniapp的样式属性overflow:scroll滚动条样式修改
06-10
在uniapp中，可以通过以下方式修改滚动条样式： 1. 在全局样式中定义滚动条样式，如下所示： ```css ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #f5f5f5; } ::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #c1c1c1; } ``` 2. 在需要使用滚动条的组件中，添加 `overflow: scroll` 样式，如下所示： ```css .scroll-wrapper { overflow: scroll; } ``` 3. 如果需要修改滚动条的颜色、大小、形状等属性，可以在 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 中进行相应的修改。 注意：以上样式只适用于 Webkit 内核的浏览器，如 Chrome、Safari 等。其他浏览器可能需要使用不同的样式属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值