w3c 对滚动条样式的区别

最新推荐文章于 2024-01-11 15:47:54 发布
原创 最新推荐文章于 2024-01-11 15:47:54 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#c #xhtml #html

本文介绍了一种使用HTML和CSS来定制网页中滚动条样式的详细方法。通过定义特定的CSS属性，可以改变滚动条的颜色和其他视觉效果，从而提升网站的整体用户体验。

有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 

   <style type="text/css">
html
{
 SCROLLBAR-FACE-COLOR: #ecf3fb;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #cccccc;
    SCROLLBAR-3DLIGHT-COLOR: buttonface;
     SCROLLBAR-ARROW-COLOR: #000000;
     SCROLLBAR-TRACK-COLOR: #eaf0f5;
      SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
    
}
    </style>

 

没有

   <style type="text/css">
body
{
 SCROLLBAR-FACE-COLOR: #ecf3fb;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #cccccc;
    SCROLLBAR-3DLIGHT-COLOR: buttonface;
     SCROLLBAR-ARROW-COLOR: #000000;
     SCROLLBAR-TRACK-COLOR: #eaf0f5;
      SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
    
}
    </style>

jquery.nicescroll兼容IE6-10,符合w3c标准浏览器,智能终端的滚动条
09-27
通过调整各种配置选项，可以定制出符合网站风格的滚动条样式。同时，结合API提供的方法，还可以在运行时动态改变滚动条的状态。总的来说，jQuery.nicescroll是一个强大且灵活的解决方案，旨在提升网站的滚动体验，...
符合W3C网页标准的iframe标签的使用方法
10-30
2. **样式与布局问题**：直接使用`<iframe>`可能导致内部内容与外部页面样式不一致，或者由于尺寸控制不当而出现滚动条等问题。 3. **可访问性问题**：如果`<iframe>`内部内容没有适当的标记，可能会导致视障用户...
W3C标准下js动态隐藏滚动条(document.body兼容处理)
程序改变世界
06-10 3046
关于在css中控制滚动条是否隐藏，想必对大家说都小意思了，可是用js动态控制是否显示呢？估计还没有思路，去百度一下，方法了了无几，没有可以真正实现的～这两天也正在考虑这个问题，居然就被我想通了，一个js控制overflow:hidden;不就搞定了嘛～结果发现在op ff等下却无效，查了下资料，现将动态隐藏滚动条的js贴出来，以方便有此需要的朋友。至于用处就不说啦，点击一下本博客文章页面中的“我要
修改浏览器滚动条样式
最新发布
weixin_66557048的博客
01-11 5077
【代码】修改浏览器滚动条样式。
滚动条样式修改
孑立
09-02 1万+
滚动条样式
修改webkit内核浏览器滚动条样式（修改element-ui table样式）
冰雪为融的博客
04-07 3698
webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece 内层滚动槽 5. ::-webkit-scrollbar-thumb 滚动的滑块 6. ::-webkit-scrollbar-corner 边..
overflow scroll 滚动条样式
04-30
overflow scroll 是CSS用于控制元素溢出内容的属性之一，...总的来说，overflow scroll 滚动条样式是一种控制元素溢出内容的属性，通过它可以显示滚动条，同时也可以对滚动条的样式进行定制，这可以丰富你的网站设计。
CSS自定义滚动条样式实现与uni-app应用
此属性属于CSS Scrollbars Module Level 1规范的一部分，代表了W3C对滚动条样式标准化的努力。 然而，在大多数基于Chromium内核的浏览器（如Chrome、Edge、Safari等）中，更常用的是WebKit私有伪元素来实现滚动条...
CSS自定义滚动条样式实现与源码解析
CSS滚动条样式设置是一项在现代网页开发中极具实用价值的技术，尤其在提升用户体验和界面美观度方面发挥着重要作用。本文所提及的“CSS滚动条样式设置[项目源码]”深入探讨了如何通过CSS中的`::-webkit-scrollbar`...
CSS自定义滚动条样式
祈澈菇凉
09-03 786
代码 .ztree { background: #0b2b5f; padding-top: 10px; height: 689px; overflow: auto; } .ztree::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px...
修改滚动条样式
小肉包的博客
01-24 2219
修改滚动条样式 /*滚动条整体样式*/ ::-webkit-scrollbar { /*高宽分别对应横竖滚动条的尺寸*/ width: 16px; background-color: rgba(255, 255, 255, 0.1); } /*滚动条里面滑块*/ ::-webkit-scrollbar-thumb { background: #465880; }
更改滚动条样式
liuwenjie_的博客
10-09 320
在做项目时，灰色滚动条往往让用户体验不佳，全局更改一下滚动条样式，就会让人耳目一新 下面代码粘贴即可 全局更改： ::-webkit-scrollbar { width: 10px; height: 10px; } /* 滚动条的滑块 */ ::-webkit-scrollbar-thumb { background-color: #1890ff; border-radius: 3px; } 局部更改： div::-webkit-scrollbar { width: 10p
修改滚动条的样式
cherry_zhang18的博客
08-12 585
//滚动条css ::-webkit-scrollbar { /*滚动条整体样式*/ width: 2px; /*高宽分别对应横竖滚动条的尺寸*/ height: 6px; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background: #007cff; } ::-webkit-sc.
css如何修改滚动条样式
热门推荐
qq_36926807的博客
07-05 10万+
默认滚动条样式如下：那如何修改呢？如下代码：&lt;div class="inner"&gt;         &lt;div class="innerbox"&gt;         &lt;p style="height:200px;"&gt;这是内容111&lt;/p&gt;         &lt;p style="height:400px;"&am
css3修改滚动条样式
lyf的博客
01-03 2万+
1.滚动条组成　 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允...
css3更改默认滚动条样式-webkit-scrollbar
u013594477的专栏
05-17 3万+
浏览器自带的原始滚动条很不美观，在一些特殊需求中，我们需要对滚动条的样式单独设置，因此就出现了用-webkit-scrollbar来自定义滚动条的样式。。 首先 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 滚动条的组成 ::-webkit-scrollbar 滚...
CSS设置滚动条样式（兼容IE）
Rey
05-18 8万+
废话不多说，直接上demo，最下面有详细注释。 1、这是在webkit浏览器下显示的样式。 （个人比较喜欢简约点的） 2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法） 下面是代码： Lorem ipsum dolor sit amet, consectet
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值