滚动条样式设计IE支持

最新推荐文章于 2024-11-17 12:40:55 发布
最新推荐文章于 2024-11-17 12:40:55 发布
阅读量86 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/rmbteam/archive/2011/11/18/2253417.html
本文介绍了如何使用HTML和CSS来定制网页中滚动条的显示效果，包括控制滚动条的显隐、设置滚动条的颜色以及展示多种不同风格的滚动条样式代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、 控制横向和纵向滚动条的显隐

去掉滚动条 x 轴 <body > 
     去掉滚动条 y 轴 <body > 
     滚动条 x/y 轴全部去掉 <body scroll="no">

    2、滚动条颜色

     <style> 
     BODY{ 
     SCROLLBAR-FACE-COLOR: #ffffff; 
     SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
     SCROLLBAR-SHADOW-COLOR: #ffffff; 
     SCROLLBAR-3DLIGHT-COLOR: #ffffff; 
     SCROLLBAR-ARROW-COLOR: #ffffff; 
     SCROLLBAR-TRACK-COLOR: #eeeeee; 
     SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;} 
     </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 滚动条的基本颜色

    3、 箭行符号滚动条代码

<style type="text/css"> 
     <!-- 
     BODY {scrollbar-face-color: white; 
     scrollbar-highlight-color: white; 
     scrollbar-shadow-color: white; 
     scrollbar-3dlight-color: white; 
     scrollbar-arrow-color: hotpink; 
     scrollbar-track-color: white; 
     scrollbar-darkshadow-color: white} 
     --> 
     </style>

    4、 一侧滚动条代码

     <style type="text/css"> 
     <!-- 
     BODY {scrollbar-face-color: white; 
     scrollbar-highlight-color: white; 
     scrollbar-shadow-color: hotpink; 
     scrollbar-3dlight-color: white; 
     scrollbar-arrow-color: hotpink; 
     scrollbar-track-color: white; 
     scrollbar-darkshadow-color: white} 
     --> 
     </style>

    5、 朴素型滚动条代码

     <style type="text/css"> 
     <!-- 
     BODY { 
     scrollbar-face-color: white; 
     scrollbar-highlight-color: hotpink; 
     scrollbar-shadow-color: hotpink; 
     scrollbar-3dlight-color: white; 
     scrollbar-arrow-color: hotpink; 
     scrollbar-track-color: white; 
     scrollbar-darkshadow-color: white} 
     --> 
     </style>

    6、一侧滚动条代码

<style type="text/css"> 
     <!-- 
     BODY {scrollbar-face-color: white; 
     scrollbar-highlight-color: white; 
     scrollbar-shadow-color: hotpink; 
     scrollbar-3dlight-color: white; 
     scrollbar-arrow-color: hotpink; 
     scrollbar-track-color: white; 
     scrollbar-darkshadow-color: white} 
     --> 
     </style>

    7、 立体型滚动条代码

     <style type="text/css"> 
     <!-- 
     BODY {scrollbar-face-color: pink; 
     scrollbar-highlight-color: deeppink; 
     scrollbar-shadow-color: lavenderblush; 
     scrollbar-3dlight-color: lavenderblush; 
     scrollbar-arrow-color: white; 
     scrollbar-track-color: lavenderblush; 
     scrollbar-darkshadow-color: deeppink} 
     --> 
     </style>

转载于:https://www.cnblogs.com/rmbteam/archive/2011/11/18/2253417.html

配置H5的滚动条样式的示例代码
09-27
在IE浏览器中，自定义滚动条样式的方法略有不同，但从IE5.5开始也提供了支持。 以下是一些关键的CSS选择器，用于配置H5滚动条样式： 1. `::-webkit-scrollbar`：这是用于定义整个滚动条的通用样式。你可以设置其...
IE滚动条 CSS样式
06-30
在早期版本的IE（如IE6、IE7）中，由于浏览器的兼容性问题，自定义滚动条样式并不完全支持，而从IE8开始，引入了`-ms-scrollbar`伪元素来允许一定程度的样式调整。然而，这些样式仅限于颜色、宽度和边框，不能像现代...
浏览器滚动条的样式设计
老练
07-31 372
1. 样式说明： ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb） ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的...
网页设计方案中的滚动条设计指南
light86的专栏
10-26 498
网页设计方案中的滚动条设计指南
web滚动条设计思路
KimYoo的专栏
11-09 3063
或许有些人会认为我有毛病,滚动条也要自己设计.其实在bs系统中,滚动条在版面的设计上还是有很大的用处的.当然,一般网站是不需要自己写滚动条的.当然,我现在还没开始写这个东西,只是先把思路写下来,免得以后忘记了.这里只写垂直的,横向的其实也一样1.定义四个层   分别做 容器,上按钮,下按钮,滑块2.滑块的高度定义:   滑块高度/可滑动区域 = 页面可视区域/页面总高度3.滑块移动方向跟页面移动方
美化和定制滚动条：CSS滚动条样式全攻略
weixin_42451850的博客
11-17 5167
本文还有配套的精品资源，点击获取 简介：文章介绍了在网页设计中如何通过CSS定制和美化默认的浏览器滚动条，以提升网站视觉效果和用户体验。通过使用CSS的滚动条属性、伪元素选择器以及考虑响应式设计，开发者可以创建符合网页风格的滚动条样式。文章还提供了示例代码，适用于基于WebKit的浏览器，而对其他浏览器的兼容性则可能需要额外的工具或前缀。 1. CSS滚动条属性使...
HTML div 滚动条样式设计
weixin_30312659的博客
07-20 999
::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radius:0;/*滚动条的圆角宽度*/ } ::-webkit-scrollbar{ width:8px;/*滚动条的宽度*/ height:8px;/*滚动条的高度*/ } ::-webkit-scrollb...
自定义IE浏览器滚动条样式
qq_731445005的博客
03-15 1014
自定义IE浏览器滚动条样式 追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性况： 滚动条样式支持情况支持浏览器版本可否继承描述scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色scrollbar-highlight-color IE特有属性 IE5.5+ y 设...
css 好看滚动条样式大全,CSS 个性化滚动条样式
weixin_39788740的博客
08-04 4546
页面中有许多内容过多时，为了不影响整体布局，总会有滚动效果代替。but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊，怎么办，当然作为界面的化妆师CSS就出手啦~滚动条样式由多个伪类组成 下面是我的小栗子::-webkit-scrollbar{width: 10px;height: 10px;background: #013b8e;}/* 滚动槽 */::-webkit-scrollbar...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
总的来说，通过CSS，我们可以实现自定义的`div`滚动条样式，不仅限于颜色，还可以调整大小、形状以及过渡效果，从而提升网页的用户体验和视觉效果。但为了保证兼容性，开发者应当同时使用旧的样式属性和新的伪元素...
CSS3自定义滚动条样式的示例代码
09-22
CSS3自定义滚动条样式技术是近年来Web开发中非常实用且受关注的一种样式控制方法。通过CSS3的伪元素选择器，可以对网页内的滚动条外观进行自定义设计，使滚动条与网站的整体风格更为协调，提升用户体验。 首先，...
滚动条设计：基本算法
tiangej的专栏
05-03 2710
以纵向滚动条为例： >>已知条件：     滚动条高度=h     最大值=max     最小值=min     翻页跨度=p >>基本算法     页数：     pageCount = (max - min) / p     滑块高度：  thumbH  = h / pageCount
浏览器滚动条的参数总结
madein82的专栏
10-23 1087
 简单地介绍一下涉及浏览器滚动条的样式表内容（某些样式需ie5.5+才能支持）： 1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。2．scrollbar-3d-light-color立体滚动条亮边的
电赛历年试题&经验分享.7z
08-12
电赛历年试题&经验分享.7z
PLC立体车库智能仿真系统：基于博途V15的西门子1200PLC控制与触摸屏操作 - PLC编程 v1.5
08-12
基于博途V15软件平台构建的3×2立体车库智能仿真系统。该系统采用西门子1200PLC进行控制，配备触摸屏操作界面，实现了自动出入库、电梯式小车移动以及变频器输出等功能。文中展示了详细的程序注释和模块化编程方法，如使用TON定时器实现载车板升降的速度控制，利用FC块封装车辆检测模块，通过GRAPH语言编写自动出入库逻辑等。此外，还提到了系统的IO表设计和故障处理机制，以及未来可能加入AI算法进行智能车位分配的设想。 适合人群：对PLC编程、工业自动化控制系统感兴趣的工程师和技术爱好者。 使用场景及目标：适用于学习和研究PLC编程技巧、工业自动化控制系统的仿真开发，帮助理解和掌握PLC控制逻辑、触摸屏交互设计、变频器仿真等关键技术。 其他说明：该项目不仅提供了完整的源代码和详细的注释，还能在博途PLCSIM Advanced环境中进行全仿真测试，为实际工程应用提供宝贵的经验和参考。
LuWu-陆吾，一个简单的无代码深度学习平台
08-12
资源下载链接为： https://pan.quark.cn/s/2f73b93e37c3 LuWu——陆吾，一个简单的无代码深度学习平台。（最新、最全版本！打开链接下载即可用！）
Python自动化测试框架pytest入门与实战.doc
最新发布
08-12
Python自动化测试框架pytest入门与实战.doc
统计学习,机器学习,神经网络,深度学习,使用matlab实现
08-12
资源下载链接为： https://pan.quark.cn/s/6c421a94aa8d 统计学习,机器学习,神经网络,深度学习,使用matlab实现.（最新、最全版本！打开链接下载即可用！）
打造个性化网页滚动条样式技巧
设计师需要根据目标用户群体和项目需求，选择合适的方法来设计滚动条样式，并测试在不同浏览器中的显示效果，以确保提供良好的用户体验。在自定义滚动条时，切记不要过度装饰，以免分散用户的注意力或影响到页面的可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值