搜索
首页web前端html教程CSS滚动条 - 小火柴的蓝色理想

CSS滚动条 - 小火柴的蓝色理想

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 21, 2016 am 08:54 AM
×
目录
[1]条件 [2]默认 [3]尺寸[4]兼容[5]自定义

前面的话

　　滚动条在网页中经常见到，却并没有受到足够的重视。只有当因为滚动条的问题需要处理兼容性时，才进行调试操作。本文将就滚动条的常见内容进行梳理。

 

条件

　　滚动条和overflow是紧密相关的。只有当父级的overflow的值是auto或scroll，并且元素的内容超出元素区域时，才有可能出现滚动条

 

默认

　　无论什么浏览器，默认滚动条均来自，而不是。因为元素默认有8px的margin。若滚动条来自元素，则滚动条与页面则应该有8px的间距，实际上并没有间距，所以滚动条来自元素

 

尺寸

　　通过以下代码可得出滚动条会占用浏览器的可用宽度为：

chrome/firefox/<span style="color: #000000;">IE 17px
safari 21px</span>
<span style="color: #800000;">.box</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> scroll</span>;
}<span style="color: #800000;">
.in</span>{<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;"> 1</span>;
}
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="in"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>
console.log(400-document.getElementById('in').clientWidth);

 

兼容

【1】默认情况下IE7-浏览器默认有一条纵向滚动条，而其他浏览器则没有

<span style="color: #800000;">//IE7-浏览器 
html</span>{<span style="color: #ff0000;">overflow-y</span>:<span style="color: #0000ff;"> scroll</span>;}<span style="color: #800000;">
//其他浏览器
html</span>{<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> auto</span>;}<span style="color: #800000;">
//去除页面默认滚动条
html</span>{<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> hidden</span>;}

【2】IE7-浏览器与其他浏览器关于滚动条的宽度设定机制不同

<span style="color: #800000;">.box</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> scroll</span>;
}<span style="color: #800000;">
.in</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 60px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightgreen</span>;
}
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span>测试文字<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

　　父级box出现纵向滚动条，实际上子级in的可用宽度就缩小了。IE7-浏览器的子级宽度忽略了该滚动条的宽度，子级宽度=400*100%=400px，则出现了横向滚动条；而其他浏览器的子级宽度考虑到该滚动条的宽度，子级宽度=(400-滚动条宽度)*100%

　　左图为IE7-浏览器，右图为其他浏览器

【3】水平居中跳动问题

　　当一个元素在页面中水平居中时，页面中出现纵向滚动条会发生水平居中的跳出问题。解决方法如下:

<span style="color: #800000;">//IE8-默认
html</span>{<span style="color: #ff0000;">overflow-y</span>:<span style="color: #0000ff;"> scroll</span>}<span style="color: #800000;">
//IE9+，100vw表示浏览器的宽度，100%表示可用内容的宽度
.container</span>{<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;"> calc(100vw-100%)</span>}

 

自定义

【1】IE

　　IE浏览器支持通过CSS样式来改变滚动条的部件的自定义颜色

scrollbar-face-<span style="color: #000000;">color 滚动条凸出部分的颜色
scrollbar</span>-shadow-<span style="color: #000000;">color 立体滚动条阴影的颜色
scrollbar</span>-highlight-<span style="color: #000000;">color 滚动条空白部分的颜色
scrollbar</span>-3dlight-<span style="color: #000000;">color 滚动条亮边的颜色
scrollbar</span>-darkshadow-<span style="color: #000000;">color 滚动条强阴影的颜色
scrollbar</span>-track-<span style="color: #000000;">color 滚动条的背景颜色 
scrollbar</span>-arrow-<span style="color: #000000;">color 上下按钮上三角箭头的颜色 
scrollbar</span>-<span style="color: #0000ff;">base</span>-color  滚动条的基本颜色

【2】webkit

　　webkit内核的浏览器支持滚动条自定义样式，但和IE不同，webkit是通过伪类来实现的

组成

::-webkit-<span style="color: #000000;">scrollbar 滚动条整体部分
::</span>-webkit-scrollbar-<span style="color: #000000;">thumb 滚动滑块
::</span>-webkit-scrollbar-<span style="color: #000000;">track 外层轨道
::</span>-webkit-scrollbar-track-<span style="color: #000000;">piece 内层轨道
::</span>-webkit-scrollbar-<span style="color: #000000;">corner 边角
::</span>-webkit-scrollbar-button 两端按钮

　　[注意]当为滚动条设置宽高样式为百分比值时，是相对视窗大小来说的

　　[注意]滚动条的层叠关系为scrollbar在最底层，往上依次是track外层轨道，track-piece内层轨道。而button按钮、corner边角和thumb滑块有最顶层

伪类相关

<span style="color: #000000;">:horizontal
</span><span style="color: #008000;">//</span><span style="color: #008000;">horizontal伪类适用于任何水平方向上的滚动条</span>
<span style="color: #000000;">
:vertical
</span><span style="color: #008000;">//</span><span style="color: #008000;">vertical伪类适用于任何垂直方向的滚动条</span>
<span style="color: #000000;">
:decrement
</span><span style="color: #008000;">//</span><span style="color: #008000;">decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮</span>
<span style="color: #000000;">
:increment
</span><span style="color: #008000;">//</span><span style="color: #008000;">increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮</span>
<span style="color: #000000;">
:start
</span><span style="color: #008000;">//</span><span style="color: #008000;">start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面</span>
<span style="color: #000000;">
:end
</span><span style="color: #008000;">//</span><span style="color: #008000;">end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面</span>
<span style="color: #000000;">
:</span><span style="color: #0000ff;">double</span>-<span style="color: #000000;">button
</span><span style="color: #008000;">//</span><span style="color: #008000;">double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。</span>
<span style="color: #000000;">
:single</span>-<span style="color: #000000;">button
</span><span style="color: #008000;">//</span><span style="color: #008000;">single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。</span>
<span style="color: #000000;">
:no</span>-<span style="color: #000000;">button
no</span>-<span style="color: #000000;">button伪类表示轨道结束的位置没有按钮。

:corner</span>-<span style="color: #000000;">present
</span><span style="color: #008000;">//</span><span style="color: #008000;">corner-present伪类表示滚动条的角落是否存在。</span>
<span style="color: #000000;">
:window</span>-<span style="color: #000000;">inactive
</span><span style="color: #008000;">//</span><span style="color: #008000;">适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。</span>
<span style="color: #000000;">
::</span>-webkit-scrollbar-track-<span style="color: #000000;">piece:start {
</span><span style="color: #008000;">/*</span><span style="color: #008000;">滚动条上半边或左半边</span><span style="color: #008000;">*/</span><span style="color: #000000;">
}

::</span>-webkit-scrollbar-thumb:window-<span style="color: #000000;">inactive {
</span><span style="color: #008000;">/*</span><span style="color: #008000;">当焦点不在当前区域滑块的状态</span><span style="color: #008000;">*/</span><span style="color: #000000;">
}

::</span>-webkit-scrollbar-<span style="color: #000000;">button:horizontal:decrement:hover {
</span><span style="color: #008000;">/*</span><span style="color: #008000;">当鼠标在水平滚动条下面的按钮上的状态</span><span style="color: #008000;">*/</span><span style="color: #000000;">
}</span>

常用设置

<span style="color: #800000;">.box</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> scroll</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 40px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.box::-webkit-scrollbar
</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #F5F5F5</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">定义滚动条轨道 内阴影+圆角</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.box::-webkit-scrollbar-track
</span>{<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> inset 0 0 6px rgba(0,0,0,0.3)</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #F5F5F5</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">定义滑块 内阴影+圆角</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.box::-webkit-scrollbar-thumb
</span>{<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> inset 0 0 6px rgba(0,0,0,.3)</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #555</span>;
}
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>我是特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长的测试文字<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

样式类举

　　自定义滚动条源码

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
举一个带有属性的HTML标签的示例。举一个带有属性的HTML标签的示例。May 16, 2025 am 12:02 AM

HTML标签和属性的使用方法包括：1.基本用法：使用标签如和，通过属性如src和href添加必要信息。2.高级用法：使用data-*自定义属性实现复杂交互。3.避免常见错误：确保属性值用引号包围。4.性能优化：保持简洁，使用标准属性和CSS类名，确保图像有alt属性。掌握这些将提升网页开发技能。

HTML标签和HTML属性有什么区别？HTML标签和HTML属性有什么区别？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未来：进化和趋势HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

<🎜>：种植花园 - 完整的突变指南
4 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
1 个月前By尊渡假赌尊渡假赌尊渡假赌
北端：融合系统，解释
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
4 周前By尊渡假赌尊渡假赌尊渡假赌
克莱尔·默默德（Clair Obscur）：Expedition 33 UE-Sandfall游戏崩溃？ 3种方法！
2 周前ByDDD
显示更多

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

显示更多

热门话题

Java教程
1677
14
CakePHP 教程
1431
52
Laravel 教程
1334
25
PHP教程
1280
29
C# 教程
1257
24
显示更多