css 设置overflow:scroll 滚动条的样式

最新推荐文章于 2024-05-10 00:07:55 发布
最新推荐文章于 2024-05-10 00:07:55 发布
阅读量5.8k 收藏 6
点赞数 4
分类专栏： html
原文链接：https://www.cnblogs.com/web-aqin/p/11244121.html
版权

 css 设置overflow:scroll 滚动条的样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

  /* 定义滚动条样式 */

::-webkit-scrollbar {

  width: 6px;

  height: 6px;

  background-color: rgba(240, 240, 240, 1);

}

 

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);

  border-radius: 10px;

  background-color: rgba(240, 240, 240, .5);

}

 

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {

  border-radius: 10px;

  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);

  background-color: rgba(240, 240, 240, .5);

}

 

冷色系微风爱丶
关注
专栏目录
css美化overflow:scroll的滚动条样式
rick_fbq的博客
04-08 1949
首先了解一下滚动条样式由哪些类名定义 ::-webkit-scrollbar //定义滚动条样式 ::-webkit-scrollbar-track //定义滚动条的滑道样式 ::-webkit-scrollbar-thumb //定义滑块儿的样式 通过修改这几个类的CSS属性就可以写出好看的滚动条 举个例子 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 10px; //定义滚动条宽度
CSS隐藏滚动条，设置滚动条样式
最新发布
2301_81449444的博客
09-27 653
hidde，再配合position，变相隐藏滚动条。可滚动的容器外层再签套一个父盒子，父盒子设置。
overflow:scroll滚动条样式修改
mosansui的博客
07-13 5796
第一,在需要加滚动条的元素上加上overflow: scroll,并设置高度! 如: <div><p class="AddStyle">213131321231312331312313131231212313123123123131231231</p></div> 我需要给p标签加入滚动条!代码如下! .AddStyle{ overflow: scroll;height: 600px; } 第二,现在p标签如果超出高度为600px的时候就有滚动条显示了!接
关于 overflow 滚动条(滑动条)配置，简单使用的案例和案例代码
youyudehan的博客
01-19 2806
简单了解关于滚动条(滑动条)的样式配置，了解其配置的注意事项，完成实现简单的样式配置实例。
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
09-25
在CSS中，`overflow`属性用于...`overflow-y: scroll`确保元素在内容高度超出时显示垂直滚动条，而`overflow-x: hidden`则隐藏任何可能的水平滚动条。 具体到你的问题，你提到的解决方案是使用以下CSS样式： ```css ...
css设置Overflow实现隐藏滚动条的同时又可以滚动
01-19
css设置Overflow实现隐藏滚动条的同时又可以滚动，具体代码如下所示： .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; padding: 0 0.1rem...
改变CSS中用overflow：scroll创造出的滚动条样式
qq_40685439的博客
12-04 746
滚动条轨道样式可根据需要去设置 ::-webkit-scrollbar-track ，结果：
overflow产生的滚动条样式设置
shy256的博客
12-17 1万+
修改overflow产生的滚动条样式，主要可以通过如下三个伪元素设置： 1)-webkit-scrollbar：设置水平滚动条的高度，垂直滚动的宽度 2)-webkit-scrollbar-thumb：设置滚动条里面的滑块样式 3)-webkit-scrollbar-track：设置滚动条的轨道背景样式 4)本文默认使用chrome浏览器查看运行效果 方法/步骤 新建一个html文件叫做CssOverFlow.html(有html编辑工具的，就使用工具创建。没有工具的，可以先创建文本文件，再修改
CSS overflow 属性设置滚动条
10-27 842
visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 scroll 不管内容是否...
【overflow的滚动条的样式设置】
Auaaa的博客
01-14 484
css的滚动条的样式设置 （需要设置的元素的类或id）::-webkit-scrollbar { /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ } /*定义滚动条轨道*/ （需要设置的元素的类或id）::-webkit-scrollbar-track { border-radius: 5px; background: #2f4c5b; } /*定义滑块*/ （需要设置的元素的类或id）::-webkit-scrollbar-thumb { border-radius: 1px
overflow属性当页面内容超出时 修改美化滚动条样式（CSS）
weixin_44096999的博客
07-24 2584
overflow 属性可以控制内容溢出，将对应区域内超出部分进行隐藏或者添加滚动条。页面CSS样式：(一定要设置宽高，否则不生效，不会出现溢出情况)height: 5px;//高宽分别对应横竖滚动条的尺寸。上述滚动条想要什么样式，根据自己的需求对应去修改即可。对y轴隐藏设置：overflow-y:hidden;对x轴自适应设置：overflow-x:auto;//滚动条里的小方块。
快速修改滚动条样式
qq_45279519的博客
07-24 536
快速修改CSS滚动条样式 通过下面的代码，如有需要更改类名，直接复制css样式代码，可直接修改css滚动条样式 html部分： <div class="scorll"> 内容 </div> css部分： .scorll{ overflow-y: scroll; overflow-x: hidden; } /* 修改滚动条样式 */ .scorll::-webkit-scrollbar { width: 3px; //滚动条宽度 } .scorll::-
CSS：overflow作用
Weiki的博客
05-10 816
CSS：overflow作用
CSS H5 移动端开发 overflow: scroll 不显示滚动条问题（ios 暗黑模式不生效）
RosaChampagne的博客
05-26 6882
在做H5的开发时，需求要求显示滚动条，但是加上overflow: scroll;不起作用，在电脑上调试是没有问题的，但是在真机上不显示滚动条。 于是采用手动添加的方式解决，但是这种方式在IOS的暗黑模式下是不生效的，因为我的这个页面背景是白色，而在IOS的暗黑模式下，滚动条也是白色，只有深色背景可以看见滚动条。 ​ .article-content { max-height: 6.4rem /* 480/75 */; overflow: scroll; -webkit-overfl.
【css】 overflow scroll 和auto的使用差别
不足
01-20 2731
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。 overflow 属性可设置以下值： visible - 默认。溢出没有被剪裁。内容在元素框外渲染 hidden - 溢出被剪裁，其余内容将不可见 scroll - 溢出被剪裁，同时添加滚动条以查看其余内容 auto - 与 scroll 类似，但仅在必要时添加滚动条 当我们需要做一个限制高度，带滚动条的容器时，一般会使用 scroll 或 auto ，但这两个在展示上具体有哪些区别呢？ 下面的代码是使用了scrol
css使用overflow属性控制滚动条的样式
热门推荐
u012145816的博客
05-23 2万+
overflow: auto; 在需要时内容会自动添加滚动条  overflow: scroll; 显示横、纵向滚动条  overflow-x: hidden; 不显示横向的滚动条  overflow-y: hidden; 不显示纵向的滚动条 overflow-x: scroll; 显示横向的滚动条 overflow-y: scroll; 显示纵向滚动条  代码如下：
使用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 等。其他浏览器可能需要使用不同的样式属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值