必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-08-29 13:43:24来源:IT技术作者:seo实验室小编阅读:74次「手机版」
 

设置滚动条样式

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

这里写图片描述

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

这里写图片描述

明显感觉到视觉上的不同,那么现在我们就来设置滚动条的样式:

在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如有:Google Chrome、Opera(opera最近宣布使用webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器······

下面我们来看一下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 :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)

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


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p {
            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>

<p id="p1">
    请选择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语言等的实用例子。
</p>

</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; /*滚动条的基色*/

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

相关阅读

【CSS】absolute 元素完全居中的两种方法

方法一:(不能微调)position:absolute;left:0; right:0; top:0; bottom:0;margin:auto;方法二:(可微调)position:absolute;top:50%; left

html——table标签及其css样式

<table border="1" width="400px" height="200px"> <caption>完整table</caption> //标题 <thead> <tr> <th

css3 深刻认识border-color和border-radius的属性

1.border-radius 属性: 我们先看看下面的图片: 如果你们看到这个图片该怎么写的?先思考一下 代码如下: .box{ width: 20

自己的样式被element.style样式覆盖:

element.style的样式问题: 我们在调整页面样式的时候总会看见element.style中有一些样式会把我们自己的样式覆盖掉。 这种一般

笔记:使用CSS实现箭头图标

实现流程: p => 内容缩小,边框加粗 => 内容缩小为0 =>把下边框去掉,剩下上,左,右边框 => 设置左右边框为透明  .className::after

分享到:

栏目导航

推荐阅读

热门阅读