/*滚动条样式*/

div::-webkit-scrollbar { /*滚动条整体样式*/

    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 5px;

}

div::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

    border-radius: 5px;

    -webkit-box-shadow: inset   5px #fafafa;

    background: rgba(,,,.);

}

div::-webkit-scrollbar-track { /*滚动条里面轨道*/

    -webkit-box-shadow: inset   5px #fafafa;

    border-radius: ;

    background: #ececec;

}

效果下：

修改DIV滚动条样式的更多相关文章

  1. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  2. HTML div 滚动条样式设计

    ::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radius:0;/*滚动条的圆角 ...

  3. css 修改默认滚动条样式

    来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删 <div class="inner"> <div clas ...

  4. jQuery Scroll div滚动条样式更改

    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> ...

  5. css实现修改默认滚动条样式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  6. 修改el-table滚动条样式

    <include file="Trade:header" /> <style type="text/css" media="scre ...

  7. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  8. 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

    资料: http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...

  9. 修改 div 的滚动条的样式

    修改 div 的滚动条的样式 需要用到浏览器专属的伪元素,没有万能的办法,支持的浏览器不是很多. 假设有一个(你已经)设好宽高.定好位的 div, <div class="group- ...

随机推荐

  1. uva340 Master-Mind Hints (UVA - 340)

    题目简要 题目意思很简单每个测试都由原题目在第一行,然后后面的都是去猜的答案,如果猜测的位置正确那么输出的结果的数对里面的第一个数就加一,如果仅答案正确(原题目里有这个数,但是位置不一样)那么就在输出 ...

  2. MySQL多表连接操作

    select * from userinfo ,dapartment where userinfo.part_id = dapartment.id; --左连接: 左边全部显示 select * fr ...

  3. centos中安装jdk

    1.上传jdk安装文件到根目录 2.解压到相关目录 (1)创建相应目录mkdir -p /usr/local/java (2)解压 tar -zxvf jdk-7u80-linux-x64.tar.g ...

  4. Django - Form和ModelForm

    [TOC] 一. form介绍 1.生成页面可用的HTML标签 2. 提供input可以提交数据 3. 对用户提交的数据进行校验 4. 保留上次输入内容 5. 提供错误信息 二. 普通方式书写注册功能 ...

  5. 关于框架搭建-web

    最近一直在学习前端相关的东西,在学了一堆基础可以以及动手在某个前端框架上写了一些东西之后,我想尝试着开始自己搭建一个框架.不知道时间需要多久,但会持续更新.小菜鸟的成长记录. ------------ ...

  6. qwb与学姐

    qwb与学姐 Time Limit: 1 Sec  Memory Limit: 128 MB Description qwb打算向学姐表白,可是学姐已经受够了他的骚扰,于是出了一个题想难住他:已知一幅 ...

  7. noip模拟赛 radius

    分析:这道题实在是不好想,一个可以骗分的想法是假定要求的那个点在中心点上,可以骗得不少分.但是在边上的点要怎么确定呢?理论复杂度O(﹢无穷).答案一定是和端点有关的,涉及到最大值最小,考虑二分最大值, ...

  8. fzu 2125

    #include<stdio.h> #include<math.h> int total(int x,int m) { int sum=0; while(x>0) {   ...

  9. Grails里DOMAIN类的一对一，一对多，多对多关系总结及集成测试

    终于干完这一章节,收获很多啊. 和DJANGO有类似,也有不同. User.groovy: package com.grailsinaction class User { String loginId ...

  10. MVC.Net：Razor指定模板

    在MVC.Net开发中,我们通常会在_ViewStart.cshtml中指定一个默认的模板,在文件开头输入如下代码: @{ Layout = "~/Views/Shared/[自己定义的模板 ...