自定义webkit内核的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

时间： 2024-11-05 16:26:17

自定义webkit内核的scrollbar的相关文章

给Webkit内核的浏览器控件增加互交功能

转载请说明出处,谢谢~~ 昨天封装了基于webkit的wke浏览器内核,做成了duilib的浏览器控件,实现了浏览功能,但是单单的浏览功能还不满足需求,在我的仿酷狗项目中乐库的功能需要与浏览器互交. 大家知道在使用酷狗浏览器时,右侧的乐库,当我们选中了某个音乐,这时酷狗就会去缓冲并且播放响应的歌曲.本身浏览器与c++的窗体是不会互交的.而酷狗使用的IE浏览器内核,在c++代码中对CHtmlView类进行继承和重写,并完成IDispatchEx接口的相关工作后,就可以开启IE内

QQ浏览器6.14抢先体验集成最新Webkit内核

2012年5月24日,拥有最新Webkit内核的QQ浏览器6.14正式版隆重发布!QQ浏览器6.14正式版一出,就在HTML5测试中得到最高的464分,可谓一鸣惊人!QQ浏览器6.14正式版对不少功能进行优化和改进,让很久没用QQ浏览器的笔者振奋不已!搭载全新Webkit内核的QQ浏览器6.14正式版究竟好不好用,一起体验一下. 干干净净的一键安装模式跟大多数浏览器安装模式不一样,QQ浏览器6.14正式版支持一键安装模式.点一下鼠标就完成整个安装过程,不安装任何第三方软件,干干净净! 干干净净

将webkit内核封装为duilib的浏览器控件

转载请说明出处,谢谢~~ 原本的duilib是自带浏览器控件的,但是使用了IE内核,我在做仿酷狗音乐播放器时,在右侧乐库要用到浏览器控件,而我使用自带的IE控件却发现了不少缺点,这也是duilib一直没有解决的,编程群里的朋友也反映IE控件不好用.而目前最常用的浏览器内核一个是IE内核,另一个是webkit内核. 先简单介绍一下这个webkit内核 WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla

Google拟开发WebKit内核Android浏览器

[搜狐IT消息]北京时间8月23日消息,据国外媒体报道,Google员工透露,Android团队现在开始加强与WebKit社区的合作. 它们准备开发一款采用WebKit内核的开源Android浏览器.Android有单独的浏览器,只是不叫Chrome,但二者共享了一些代码.不过它们是由两个团队分别开发的.由于某种原因,Google选择不将Android上的浏览器称为Chrome,这可能是为了避免与Chrome OS混淆.Android团队现在准备开始开发Android浏览器的修改版,这个版本将会

自定义webkit搜索框样式

每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致... 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的? 那我们在很多情况下需要让页

css去除webkit内核的默认样式

这时候可以用到 -webkit-appearance:none //去除默认样在按钮和select样式里加入上面css,效果如下图. css代码如下: input{ background:#FF9933; border-radius:5px; color:#fff; padding:3px 20px; -webkit-appearance:none;}select{ background:url(images/img1.jpg) no-repeat; background-size:20px;

Webkit优化网站在IE10兼容最优方案

文章简介:本指南涵盖了你为Webkit优化的网站在IE10和其他兼容标准的浏览器上也能运行得很好的最常用的适配方案.如果你有其他技巧是本文没有涵盖的,请你分享在下面的评论栏里. IE10对HTML5的广泛支持确保了你的网站在Windows Phone 8中比以往任何时候都能运行的好.之前,为了支持iOS或Android你可能会把Webkit作为专门优化的目标.现在可以让你为Webkit优化的网站也能轻松适配IE10.这意味着你将维护更少的代码,并且,可以给你的客户一个更好的体验.更让人欣喜的是,

针对webkit的HTML, CSS和Javascript

前面有一篇文章介绍了HTML5的一些新特性以及技巧, 现再来总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性. HTML, 从HTML文档的开始到结束排列: XML/HTML Code复制内容到剪贴板 <meta name="viewport" content="width=device-width, initial-scale=1.0″/> <!--让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的

【原】如何改变表单元素的外观(for Webkit and IE10)

表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的外观,使用自定义的,对于产品本身来说这样的要求是加分项,开发在力所能及的范围内应该大力支持.做H5移动开发,并没有原生APP开发那样,大部分内容都可以自定义,移动端H5页面受手机系统的影响,不同的浏览厂商对表单元素的渲染效果差异很大. 下图为 iphone4s .魅族 android4.4 .诺基亚