AI 助理
备案控制台
开发者社区 云计算 文章 正文

自定义webkit内核的scrollbar

2016-04-08 2070
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

刚自定义的，上图：

scrollbar

说明

::-webkit-scrollbar   { 1 }滚动条整体部分 
::-webkit-scrollbar-button   { 2 }滚动条两端的按钮 
::-webkit-scrollbar-track   { 3 }外层轨道 
::-webkit-scrollbar-track-piece   { 4 }内层轨道，滚动条中间部分（除去） 
::-webkit-scrollbar-thumb   { 5 }拖动按钮 
::-webkit-scrollbar-corner   { 6 }边角 
::-webkit-resizer   { 7 }定义右下角拖动块的样式

demo

http://codepen.io/makaiqian/pen/CxnjB

小麻雀
目录
相关文章
换个网名有点难
|
5月前
|
自然语言处理 前端开发 JavaScript
WebKit的使用技巧
WebKit的使用技巧
换个网名有点难
45 0
祈澈菇凉
|
11月前
|
前端开发
border-radius 兼容 IE8浏览器
border-radius 兼容 IE8浏览器
祈澈菇凉
74 1
hahacai
|
前端开发 容器
利用transition属性实现一个简单小巧的hover效果
原理 定位一个 初始width为0的em元素，hover的时候再将 width设置为容器的width. 再利用transiton对width变化的过程设置过度效果
hahacai
129 0
利用transition属性实现一个简单小巧的hover效果
hahacai
|
前端开发
css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题
解决网站bug时，发现一个棘手的问题：<input type="checkbox">的复选框选中了没有打钩，经排查，是由于css中“-webkit-appearance: none;”导致的，改成“-webkit-appearance: checkbox”后恢复正常。查询资料：总结如下
hahacai
653 0
fg3vnhvvi2tja
|
移动开发 前端开发 JavaScript
WebKit 技术内幕之浏览器与WebKit内核
此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。 而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。
fg3vnhvvi2tja
549 0
WebKit 技术内幕之浏览器与WebKit内核
Lux_Sun
Element UI - 滚动条样式（仅支持 Webkit 内核）
Element UI - 滚动条样式（仅支持 Webkit 内核）
Lux_Sun
635 0
码农工程师
|
Web App开发
Chrome浏览器里的-webkit-focus-ring-color
Chrome浏览器里的-webkit-focus-ring-color
码农工程师
131 0
Chrome浏览器里的-webkit-focus-ring-color
杰克.陈
|
安全 C# Windows
C#调用WebKit内核
原文:C#调用WebKit内核 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013564470/article/details/80255954 系统要求 Windows与.NET框架 由于WebKit库和.NET框架的要求，WebKit .NET只能在Windows系统上运行。
杰克.陈
1376 0
nicenelly
|
Web App开发
CHROME扩展：HOVER ZOOM
nicenelly
1305 0
文艺小青年
|
缓存
Webkit是如何加载网页的
文艺小青年
1025 0