/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

详情查看:http://blog.csdn.net/hanshileiai/article/details/40398177

Chrome自定义滚动条的更多相关文章

  1. 自定义滚动条Js简版

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>自定义滚 ...

  2. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  3. 【jquery】jquery 自定义滚动条

    可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $(" ...

  4. CSS3自定义滚动条样式-webkit内核

    自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  7. 利用JS实现自定义滚动条

    一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能: 代码如下: <!doctype html> <html> <head> <meta c ...

  8. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  9. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

随机推荐

  1. jersey 开启gzip

    @Bean public ResourceConfig resourceConfig() { ResourceConfig resourceConfig = new ResourceConfig(); ...

  2. MongoDB(1)--MongoDB安装及简介

    一.MongoDB的应用场景及实现原理二.MongoDB的常用命令及配置三.手写基于MongoDB的ORM框架四.基于MongoDB实现网络云盘实战五.MongoDB 4.0新特性 一.MongoDB ...

  3. Django 中的JsonResponse 和 json区别

    from django.http import JsonResponse JsonResponse 里面代码会加这一个响应头 kwargs.setdefault('content_type', 'ap ...

  4. 取消IDEA默认打开最近的项目(设置打开选择创建页面)

    Ctrl + Shift + s 打开设置界面 选择Appearance&Behavior 找到System Settings 将Reopen last project on startup ...

  5. DEPLOY YOUR WEBSITE TO GITHUB PAGES

    DEPLOY YOUR WEBSITE TO GITHUB PAGES Review Fantastic! You now have your site published on the public ...

  6. Servlet中response、request乱码问题解决

    Java Web(二) Servlet中response.request乱码问题解决   三月不减肥,五月徒伤悲,这就是我现在的状态,哈哈~ 健身.博客坚持. --WH 一.request请求参数出现 ...

  7. MySql:SELECT 语句(五)正则表达式的使用

    关键字:REGEXP REGEXP 语句形式和 LIKE 语句相似,REGEXP 后面跟正则表达式.如果需要区分大小写,可以在 REGEXP 后加关键字 BINARY. 所有的正则表达式的规则都可以在 ...

  8. CentOS6.3上安装与配置nginx+php+mysql环境

    1. 目前nginx采用是源码包安装的方式(yum安装失败),下载地址:http://nginx.org/en/download.html 我这里的安装包是:nginx-1.12.0.tar.gz 2 ...

  9. unittest框架(惨不忍睹低配版)

    根据我上个随笔的unittest框架优化得来,虽然对于smtp模块还是有点迷糊,不过还是勉强搭建运行成功了,还是先上代码: #login_test.py import requests class L ...

  10. python入门(十三):面向对象(继承、重写、公有、私有)

    1. 三种类定义的写法  class P1:#定义类   加不加()都可以    pass   class P2():                    #带(),且括号中为空,类定义 pass ...