网页滚动条CSS样式

最新推荐文章于 2024-04-23 09:01:16 发布
最新推荐文章于 2024-04-23 09:01:16 发布
阅读量7.4k 收藏 3
点赞数
分类专栏： css 文章标签： css scroll c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xck01/article/details/1476881
版权

滚动条样式主要涉及到如下CSS属性:

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条


width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]

height: 120px; 设置区域的高度[像素/百分比等等]


<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #f892cc;
SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;
SCROLLBAR-SHADOW-COLOR: #fd76c2;
SCROLLBAR-3DLIGHT-COLOR: #fd76c2;
SCROLLBAR-ARROW-COLOR: #fd76c2;
SCROLLBAR-TRACK-COLOR: #fd76c2;
SCROLLBAR-DARKSHADOW-COLOR: #f629b9;
SCROLLBAR-BASE-COLOR: #e9cfe0
}
</STYLE>


SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: 滚动条的基本颜色

网页中去掉滚动条：
去掉横向滚动条：<body   style='overflow:scroll;overflow-x:hidden'>  
去掉竖向滚动条：<body   style='overflow:scroll;overflow-y:hidden'>  
两个都去掉：<body   scroll="no">  
框加中去滚动条在name=""后面加 scrolling="No"

xck01
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3改变浏览器滚动条样式
09-22
浏览器滚动条太宽，太丑，影响日常开发怎么办，本文介绍了如何使用CSS3改变浏览器滚动条样式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
scroll滚动条样式【CSS】
threedeformity的博客
08-08 1953
二、单独滚动条样式设置。
网页中滚动条的设置和修改
丹
06-12 6336
一、通过css设置滚动条 在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器…… 下面我们来看一下webkit浏览器是如何强大的吧！首先来了解它的属性: 1. ::-w...
自定义滚动条样式
weixin_51679573的博客
11-30 200
自定义滚动条样式
外部统一设置了::-webkit-scrollbar { display: none； }如何单独给特定元素开启滚动条设置样式-web页面滚动条样式设置
JackieDYH的博客
10-16 891
​元素中单独开启滚动条的样式，你可以使用CSS的级联选择器来覆盖外部样式。​元素中单独开启滚动条的样式，而不受外部样式的影响。​选择器来重新显示滚动条，并设置滚动条的样式。​选择器来隐藏滚动条。​属性来设置滚动条的宽度和颜色。​​来隐藏滚动条，但是想要在​。以下是一个示例，展示如何给​。在上述代码中，我们首先使用​。​元素的样式中，我们使用​。如果你在外部统一设置了​。通过这种方式，你可以在​。
如何用css给网页添加滚动条
zhang20040217的博客
11-19 708
属性的效果会受到浏览器和操作系统的影响，不同的浏览器和操作系统可能会以不同的方式显示滚动条。类的元素将具有一个可滚动的区域，无论内容是否超出了元素的宽度或高度。属性定义了当内容溢出一个块级容器时发生的事情，如果你设置该属性为。同样，如果你只想在水平方向上滚动，可以使用。如果你只想在垂直方向上滚动，可以使用。在 CSS 中，你可以使用。属性来定义滚动区域的大小。，则会在需要时显示滚动条。
【CSS】滚动条样式详解
热门推荐
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
HTML如何给页面设置滚动条 (简单，通俗易懂)
m0_60237095的博客
03-20 1万+
如何给页面设置滚动条
页面滚动条样式修改
qq_32578989的博客
06-21 1170
全局的样式文件中添加重置滚动条样式代码： /* 滚动条整体样式 */ ::-webkit-scrollbar { width: 4px; height: 4px; } /* 滚动条里面小方块 */ ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } 样式图片： /*滚动条整体样式*/ ::-webkit-scrollbar { width: 10px; /*高宽分别对应横竖滚.
修改web页面的滚动条样式
小洪帽i的博客
11-12 341
修改web页面的滚动条样式
Dreamweaver用框架集时如何给整个页面添加滚动条,怎么修饰每个框架的滚动条？
07-16
Dreamweaver用框架集时如何给整个页面添加滚动条,怎么修饰每个框架的滚动条？
滚动条样式设置
11-07
滚东条样式设置 不兼容火狐 可修改浏览器默认的滚动条 属用内核修改
网页美化之滚动条
11-07
您经常在网上看到一些美丽多彩的网页吧！当然您也注意了它们的滚动条大多数不是Windows的默认颜色，和页面搭配起来很是好看，那么它们是怎么做到的呢？懂得一些HTML脚本的人应该知道其实只是在网页的之间加了一些代码而已，但对于一些人来说要加入这些代码还不是那么容易，或者当您要将您网站的网页全部换一个滚动条的风格的话，可就不那么容易了，而使用"网页美化之滚动条"您可以轻松添加/更改一个网页或网站的滚动条颜色！
易语言CSS样式滚动条
08-21
易语言CSS样式滚动条源码系统结构:复制样式,颜色值转HTML,HTML转颜色值,进制_十六到十,绘制画板,填矩形范围,当前选择项, ======窗口程序集1 || ||------_按钮1_被单击 || ||------复制样式 || |
css使用overflow属性控制滚动条的样式
09-22
滚动条的样式我们可以通过css来控制的，滚动条样式主要涉及到如下overflow属性，下面简单为大家介绍下具体的控制属性，感性的朋友不要错过
详解如何自定义CSS滚动条的样式
09-22
本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于 Flexbox 的纯 CSS 框架：兼容性好、文档丰富 | 开源日报 No.232
最新发布
开源服务指南
04-23 197
想要快速搭建现代化的网页界面吗？不妨试试基于 Flexbox 技术的现代 CSS 框架 bulma 吧！bulma 提供快速安装方式，兼容性良好，不含 JavaScript 部分，让您的网页在主流浏览器上运行良好。丰富的文档和在线浏览功能，让您快速上手，让网页设计变得更加简单和高效。快来尝试 bulma，让您的网页设计更上一层楼！
scss 和css 的区别 scss变量和css变量的区别
qq_17335549的博客
04-17 294
【代码】scss变量和css变量的区别。
css中backface-visibility使用
qwguo
04-17 261
是一个 CSS 属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当一个元素被旋转或进行其他3D变换时，通常浏览器默认会进行背面剪裁（backface culling），使得元素的背面不可见，以提高性能和减少不必要的渲染。然而，有时我们可能希望元素的背面在旋转过程中仍然可见，这时就可以使用。需要注意的是，不同的浏览器可能对这个属性的支持程度不同。的背面则被设置为可见。当这两个元素进行3D旋转时，的背面被设置为不可见，而。的背面将不会显示，而。的背面则会正常显示。
css修改滚动条的样式
08-09
要修改滚动条的样式，你可以使用CSS的伪元素和伪类来实现。以下是一些常见的滚动条样式修改方法： 1. 修改滚动条的宽度和颜色： ```css /* 水平滚动条 */ ::-webkit-scrollbar { width: 10px; /* 修改滚动条宽度 *...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值