如何设定浏览器滚动条的颜色

最新推荐文章于 2024-05-08 10:11:08 发布
最新推荐文章于 2024-05-08 10:11:08 发布
阅读量1.4k 收藏 1
点赞数 2
分类专栏： WEB 文章标签： 浏览器 html class c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seekway9/article/details/4182632
版权

改变浏览器滚动条的颜色，保持与主页色调一致，使页面更加好看，方法很简单，只要设置style就可以。具体步骤如下：

1.用关键字“body”直接定义style，<body>中就不用加class=”body”了。body内容如下，释意见//后的文字解释

body {

           scrollbar-arrow-color:#FFFFFF;                    //箭头颜色

           scrollbar-face-color:#FDA9C0;                       //轴面颜色

           scrollbar-track-color:#EDEDED;                    //轴轨道颜色

           scrollbar-highlight-color:#FFFFFF;              //左立体边颜色

           scrollbar-shadow-color:#DEE3E7;                  //右立体边颜色

           scrollbar-3dlight-color:#D1D7DC;                  //轴面左边角颜色

           scrollbar-darkshadow-color:#BABABA;         //轴面右边角颜色

}

在使用时把“//”后的注释文字去掉，因为style不支持//注释。

 

2.去掉“<html>”前面的一句内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

……

如果不去掉，style定义的滚动条的格式不起作用，之前不知道，郁闷了好久。

 

seekway9
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿mac风格滚动条
01-25
插件描述：经典仿mac风格滚动条。 参考实例：http://www.jq22.com/jquery-info5677
偶然发现的诡异现象：Chrome浏览器滚动条变色
CaiKanXP的专栏
03-05 5183
偶然发现淘宝某些页面在Chrome下，滚动条显示带一点淡蓝色。 例如：http://arcade.taobao.com/ 但是相同的页面在IE下打开，滚动条却还是默认的样式。可见并非兼容IE的经典滚动条样式。 看来是Chrome特有的？ 查看源码就行分析。 目前已知可以通过 ::-webkit-scrollbar 来设置webkit浏览器的滚动条样式，可是在本例中，完全找不到这样
前端如何设置div可滚动，且设置滚动条颜色
最新发布
chenchuang0128的博客
05-08 561
为可滚动并通过 CSS 自定义滚动条的颜色并不是所有浏览器都直接支持的功能，因为滚动条的样式在很大程度上取决于操作系统和浏览器的默认样式。然而，你可以使用某些 CSS 属性来尝试自定义滚动条的外观，这些属性在 WebKit 浏览器（如 Chrome 和 Safari）中得到了支持。请注意，这些自定义滚动条的样式仅在支持 WebKit 的浏览器（如 Chrome、Safari）中有效。如果你需要在所有浏览器中都获得一致的自定义滚动条外观，你可能需要考虑使用第三方 JavaScript 库，如。
网页IE滚动条颜色设置
tuzi_xz的专栏
02-04 1935
几乎所有网页的滚动条都是默认的灰色，如果把它的颜色换换，来点另类的，相信一定会使网页更加靓丽。我们只要在网页代码 之间插入下面的代码，即可随心所欲地更改颜色了。    　　body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)　　SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)　　SCROLLBAR-SHA
改变浏览器默认滚动条样式
weixin_42762167的博客
05-28 341
这个网上很多的教程，我就不多哔哔了，直接贴代码，方便自己和大家使用。 可以把下面的代码放到一个css中，然后全局引入就可以了。 /* 整个滚动条 */::-webkit-scrollbar { width: 5px; height: 5px;} /* 滚动条有滑块的轨道部分 */::-webkit-scrollbar-track-piece { back...
css控制滚动条
liyuntracy的专栏
11-28 587
1．overflow内容溢出时的设置 　　overflow-x水平方向内容溢出时的设置　　overflow-y垂直方向内容溢出时的设置　　以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。　　2．scrollbar-3d-light-color立体滚动条亮边的颜色　　scrollbar-arrow-color上下按钮上三角箭头的颜色　　s
纯css修改浏览器scrollbar滚动条样式示例
09-22
例如，可以针对移动设备设定更窄的滚动条宽度，或者在高分辨率屏幕下使用更复杂的滚动条设计。 在实际应用中，为了确保兼容性和一致性，通常会结合JavaScript库，如SimpleBar或Perfect Scrollbar，它们提供了跨...
div的滚动条如何实现
12-13
另外，CSS 还提供了 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 等伪元素，可以用来自定义滚动条的样式，比如颜色、大小和形状，但这通常只适用于基于 WebKit 内核的浏览器，如 Chrome 和 Safari。...
css3 滚动条美化
10-25
2. **颜色和背景**：`background-color`用于设置滚动条的整体背景色，`border-radius`可以设定滚动条边框的圆角。`scrollbar-color`属性则可以分别设置滚动条轨道和滑块的颜色，例如：`scrollbar-color: #ccc #fff;`...
JS模拟简易滚动条效果代码(附demo源码)
10-22
默认情况下，滚动条背景颜色为灰色（`#ddd`），滚动条指示器（即可拖动部分）背景颜色为深灰色（`#aaa`）。 4. **事件监听**： 添加了`onmousewheel`事件监听器，以支持鼠标滚轮滚动。同时，滚动条指示器添加了`...
滚动条CSS样式控制浏览器滚动条颜色的代码
weixin_30779691的博客
05-14 220
制作网站的时侯为了美化网站界面，大家都希望把浏览器右边的滚动条修改一下颜色，这个通过修改网页代码是实现不了的，我们需要借助CSS来控制滚动条的样式。 如果想修改浏览器滚动条的颜色，我们可以把下面的代码插入到CSS里，这样就可以让滚动条变色。 代码如下： （放在body里,不行就放在html标签里。） 　　　　 scrollbar-face-color:#dddddd; ...
修改浏览器默认滚动条样式，兼容IE和谷歌
前端攻城狮
07-11 1409
在项目中，很经常会需要修改浏览器滚动条的默认样式，因为浏览器本身的滚动条可能和设计师设计的页面很不搭配，话不多说上代码 1、谷歌浏览器写法，webkit内核浏览器 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scrollbar-tra
自定义浏览器滚动条的样式，详细讲解
唐策的博客
11-02 1万+
前段时间，到网上找素材时，看到了一个很个性的滚动条式，打开Chrome的调试工具看了一下，发现不是用JavaScript来模拟实现的，觉得有必要折腾一下。于是在各大浏览器中对比了一下，发现只用Chrome适用，也就是说这个用的是Chrome的私有CSS属性。便百之谷之后，发现原来不仅仅只用Chrome，其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果，若有错误或不全，请在评论里
修改浏览器滚动条样式
qq_40853132的博客
02-17 225
修改浏览器的滚动条样式
修改谷歌浏览器滚动条宽度和颜色
henry_liu的博客
04-14 1465
:-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
浏览器页面滚动条美化（样式）
wang839305939的博客
06-11 4221
浏览器页面滚动条美化（样式） 最近测试反应我们的产品在浏览器中当页面宽高出现溢出的情况下页面滚动条太丑了！让我们美化一下！然后花了一点时间专研了一下关于滚动条样式的相关知识，今天就在这里和大家一起分享一下： 其实滚动条样式是由两部分构成，一是滚动槽，二就是滑块，其实我们可以把他理解成轨道和火车的关系就行了，浏览器默认的样式其实就像我们传统的绿皮火车，现在的高铁其实就像修改后的样式，改
CSS设置滚动条样式（兼容IE）
热门推荐
Rey
05-18 8万+
废话不多说，直接上demo，最下面有详细注释。 1、这是在webkit浏览器下显示的样式。 （个人比较喜欢简约点的） 2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法） 下面是代码： Lorem ipsum dolor sit amet, consectet
浏览器自带的滚动条样式
baibaider的博客
08-09 4059
通常只适用于chrome： &lt;div class="parent"&gt; &lt;div class="child"&gt;&lt;/div&gt; &lt;/div&gt; .parent{ overflow: auto; width:100px; background-color: #ffcccc;...
怎样修改网页滚动条颜色_Part 1 · HTML5 网页开发-02
weixin_40001025的博客
11-29 700
Part 1 · HTML5 网页开发-02第二章 CSS 核心样式、H5 + C3 新特性第一节 CSS核心样式1、CSS核心样式 font-weightCSS常用样式属性： font-weight作用：font-weight 设置字体的粗细属性值说明normal默认字体大小，标准版bold粗体字，b、strong的默认值bolder定义更粗的字体lighter定义更细的字体100定义由细到粗的...
理解DIV+CSS网页代码注释与文档样式
3. 边距和滚动条属性（主要是Internet Explorer 4.0+）： - `leftmargin`, `topmargin`, `rightmargin`, `bottommargin` 分别控制页面内容与浏览器窗口边缘的距离。 - `bgproperties=fixed` 使得背景图片在页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值