• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS自定义WebKit内核浏览器滚动条实现代码

CSS自定义WebKit内核浏览器滚动条实现代码

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含WebKit,浏览器,滚动条等相关知识,佚名 希望在学习及工作中可以帮助到您
关于自定义浏览器滚动条的样式这一块,如果网站可以不考虑非WebKit内核浏览器的话,倒是可以试试只用CSS去实现。

简单地修改一下几项,就可以看到效果了:

::-webkit-scrollbar{width:12px; height:12px;} /*滚动条垂直方向的宽度与水平方向的高度*/
::-webkit-scrollbar-button{} /*滚动条按钮*/
::-webkit-scrollbar-track{} /*滚动条轨道*/
::-webkit-scrollbar-track-piece:vertical{} /*滚动条垂直方向轨道件*/
::-webkit-scrollbar-track-piece:horizontal{} /*滚动条水平方向轨道件*/
::-webkit-scrollbar-thumb{} /*滚动条轨道上的按钮*/
::-webkit-scrollbar-corner{} /*滚动条轨道上的滚动角*/

要求不是很高的话,自定义以上选项已经足够了。

简单编辑了一下,做了这么个效果:

暂时还不知道如何建立一个空白demo页面,就直接自定义了博客的滚动条,往右边瞄就能看到了,上传的是圆形图,不知道怎么就变成方的了,将就着看吧。

您可能想查找下面的文章:

  • 浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
  • CSS3 滤镜 webkit-filter详细介绍及使用方法
  • CSS自定义WebKit内核浏览器滚动条实现代码
  • CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

相关文章

  • 2017-08-06metro的介绍以及metro的好处介绍
  • 2017-08-06简单介绍CSS中的URL工具
  • 2017-08-06pre标签的css代码,防止代码pre中代码过长等问题
  • 2017-08-06基础的CSS3弹性盒Flexbox布局使用实例
  • 2017-08-06网页添加CSS样式表的四种方法
  • 2017-08-06CSS样式分离之再分离达到精简与重用
  • 2017-08-06css3media响应式布局实例
  • 2017-08-06用CSS设置表格Table的细边框的比较好用的方法
  • 2017-08-06跨浏览器的inline-block声明上承诺了很多提供的却很少
  • 2017-08-06页面内嵌样式表中使用url(), 出现页面多次载入问题解决

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css 让文字不被选中之-moz-user-select 属性介绍
    • IE6/7下多种方法移除button、input 默认边框和去掉焦点线
    • DIV+CSS实现的绿色水平一级菜单代码
    • ie7中overflow:auto无效的解决方法
    • div的滚动条如何实现
    • 纯CSS改变webkit内核浏览器的滚动条样式
    • CSS3实现可关闭的下拉手风琴菜单效果
    • 简单介绍CSS hack的使用
    • 通过float实现两个div不换行
    • 纯CSS3绘制打火机动画火焰效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有