CSS中关于滚动条样式设置的代码实例

因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋)

这里写图片描述

但是在冒险岛的官网上呈现的样式却是:

这里写图片描述

下面我们来看一下webkit浏览器是如何强大的吧！首先来了解它的属性:

滚动条的设置 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece 内层滚动槽 5. ::-webkit-scrollbar-thumb 滚动的滑块 6. ::-webkit-scrollbar-corner 边角 7. ::-webkit-resizer 定义右下角拖动块的样式

这里写图片描述

::-webkit-scrollbar ：滚动条整体部分，其中的属性: width,height,background,border等。

::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。

::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner ：边角，两个滚动条交汇处

::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

下面举一个简单的例子来说明:

  <html> <head lang="en"> <meta charset="UTF-8"> <title>标题 
   title> <style> div { width: 100px; height: 300px; border: 2px solid red; overflow-x: scroll; overflow-y: scroll; } /* 设置滚动条的样式 */ ::-webkit-scrollbar { width:12px; background-color: aqua; } /* 滚动槽 */ ::-webkit-scrollbar-track { border-radius:10px; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { border-radius:10px; background:black; }  
   style>  
   script>  
   head> <body> <div id="div1"> 请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3, JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的 实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。 小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。  
   div>  
   body>  
   html>

接着便是对我们的冒险岛的滚动条进行设置:

/* 滚动条的设置 ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式 */ ::-webkit-scrollbar { width: 6px; background-color: #181c32; } ::-webkit-scrollbar-thumb { background-color: #5a76cd; }

最后实现的功能就是这样.

但是一定注意:IE8设置滚动条的与这里不一样。

scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/ scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/ scrollbar-track-color: color; /*立体滚动条背景颜色*/ scrollbar-base-color:color; /*滚动条的基色*/

这就是简单的修改滚动条样式的方法！！！

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/178861.html原文链接：https://javaforall.net

CSS中关于滚动条样式设置的代码实例

关于作者

全栈程序员-站长

发表回复

CSS中关于滚动条样式设置的代码实例

关于作者

全栈程序员-站长

相关推荐

java中的全局变量和局部变量_JVM中基本变量放在哪

经典的进程同步问题

c++windows内核编程笔记day12 硬盘逻辑分区管理、文件管理、内存管理[通俗易懂]

推荐CSDN排名前1000博主

SpringMVC-@RequestMapping的参数和用法

python编写手机app_手机学python的app

发表回复