友言：这两天被滚动条整的无与伦比，在此做下总结：

首先自定义浏览器滚动条的实现原理：计算浏览器滚动条的高度，层级1的高度与滚动条的总高度是一样的，通过相似比例计算： 浏览器滚动条总高度 ：滚动条高度 = 层级② ：层级① =>

关于实现自定义滚轮，首先要对整个布局进行了解：

1、 1.需要显示的层级 和 2.需要被滚动层级 的关系：

  • 层级1 具有 溢出隐藏 属性，目的是为了隐藏 层级2 多出的部分。
  • 由于在 层级1 的包裹之下 层级2 溢出隐藏部分可以通过控制 层级1 的 scrollTop 进行滚动。

2、 滚动条的位置：

  • 如果你后面是通过控制 层级2 的 top值 进行滚动，那么滚动条可直接相对于 层级1 进行绝对定位。
  • 如果你是通过控制 层级1 的 scrollTop 进行滚动，那么滚动条就需要在外面多加一层包裹层，目的就是让滚动条不随着 层级1 往上滚。

这里介绍的方法是2--2。
下面进入逻辑关系：
1、首先肯定要从滚动条下手：
     1--计算滚动条的高度，这里有一点需要注意，层级1的高度与滚动条的总高度是一样的，通过相似比例计算：
            滚动条总高度 ：滚动条高度 = 层级2 ：层级1 
        =>滚动条高度 = 滚动条总高度 /（层级2 / 层级1）
     2--计算鼠标拖动滚动条时的坐标位置，首先要让鼠标无论点击滚动条哪一个位置，都变成点击滚动条的顶点坐标：
            通过获取 浏览器的Y轴坐标 - 滚动条被点击的Y轴坐标 得到
     3--实现滚动条拖动的公式：
            四要素，1-拖动时浏览器的Y轴坐标，2-点击时滚动条的Y轴坐标，3-浏览器scrollTop的值，4-当前容器的top值。 
            公式：1 - 2 + 3 - 4
            解：
            1 - 2 => 计算滚动条顶点坐标
            1 - 2 + 3 => 为了避免浏览器Y轴坐标受滚动条数值的影响，必须加上浏览器scrollTop的值
            1 - 2 + 3 - 4 => 为了避免滚动条受容器的位置影响，必须先清除容器的top值，也就是假设他们全都在同一个Y轴顶点上
     4--限制滚动条的拖动范围：
            太简单就不解释了。
     5--计算滚动条的当前顶点值与顶点可移动的极限值的比：
            计算他们的比例纯粹是为了控制 层级2 与 层级1。这是一个0-1的动态比值

2、所有东西都准备好了，剩下就是控制 层级2 与 层级1：
     1--首先获取它们两个层级的高度，然后计算出层级2顶点可移动的极限值。
          顶点可移动极限值：层级2 - 层级1。
     2--控制 层级1 的scrollTop，滚动的距离与滚动条相呼应：
           顶点可移动极限值 * 滚动条滚动的比值
     3--完成。

看完原理，我理解了，但是实践起来自己觉得麻烦，因此，搜索了下，决定使用插件解决：

1. 使用 jquery.nicescroll.min.js 插件

//jquery.nicescroll.min.js 插件

jquery.nicescroll v3.7.6

. 支持div,iframe,html 等

. 兼容IE7-,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条

. jq插件，jq 版本要高于 1.8
cursorcolor - 设置滚动条颜色，默认值是“＃”

cursoropacitymin - 滚动条透明度最小值

cursoropacitymax - 滚动条透明度最大值

cursorwidth - 滚动条的宽度像素，默认为5（你可以写“5PX”）

cursorborder - CSS定义边框，默认为“1px solid #FFF”

cursorborderradius - 滚动条的边框圆角

ZIndex的 - 改变滚动条的DIV的z-index值，默认值是9999

scrollspeed - 滚动速度，默认值是60

mousescrollstep - 滚动鼠标滚轮的速度，默认值是40（像素）

touchbehavior - 让滚动条能拖动滚动触摸设备默认为false

hwacceleration - 使用硬件加速滚动支持时，默认为true

boxzoom - 使变焦框的内容，默认为false

dblclickzoom - （仅当boxzoom = TRUE）变焦启动时，双点击框，默认为true

gesturezoom - boxzoom = true并使用触摸设备）变焦（仅当激活时，间距/盒，默认为true

grabcursorenabled“抢”图标，显示div的touchbehavior = true时，默认值是true

autohidemode，如何隐藏滚动条的作品，真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏的背景下，改变铁路背景的CSS，默认值为“”

iframeautoresize中，AUTORESIZE iframe上的load事件（默认：true）

cursorminheight，设置最低滚动条高度（默认值：）

preservenativescrolling，您可以用鼠标滚动本地滚动的区域，鼓泡鼠标滚轮事件（默认：true）

railoffset，您可以添加抵消顶部/左轨位置（默认：false）

bouncescroll，使滚动反弹结束时的内容移动（仅硬件ACCELL）（默认：FALSE）

spacebarenabled，允许使用空格键滚动（默认：true）

railpadding，设置间距（默认：顶：，右：，左：，底部：}）

disableoutline，Chrome浏览器，禁用纲要（橙色hightlight）时，选择一个div nicescroll（默认：true）

nicescroll详细参数配置



在随笔 HTML+CSS之iframe 中已举例了 jquery.nicescroll v3.7.6 对 iframe 的设置，现以 div 设置为例：






<!DOCTYPE html>

<html>

<head>

    <title>js简易滚动条</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <script src="jquery.nicescroll.min.js"></script>

</head>

<body>

    <h1>js简易滚动条</h1>

    <div id="div1" style="width:300px; height:200px; overflow:hidden; border:solid 1px gray; padding:10px; line-height:1.5;">

        hahawefa1<br />

        hahawefa2<br />

        hahawefa3<br />

        hahawefaae<br />

        hahawefa<br />

        hahawefa<br />

        hahawefa<br />

        hahawefaf<br />

        hahawefa<br />

        hahawefafa<br />

        awfawef<br />

        hahawefa<br />

        hahawefagag<br />

        hahawefa<br />

        hahawefa<br />

        hahawefa<br />

        hahawefaaf<br />

        hahawefa<br />

        hahawefaff<br />

        hahawefafffff<br />

    </div>

    <script>

        $("#div1").niceScroll({

            cursorcolor: "#E62020",   //滚动条颜色

            cursoropacitymax: 0.5, //滚动条透明度

            touchbehavior: false,

            cursorwidth:"10px",

            cursorborder:"",

            cursorborderradius:"5px"

        });

    </script>

</body>

</html>




举例：使用插件 jquery.nicescroll.min.js 改变 div 滚动条样式


运行结果如下：






参考：http://www.cnblogs.com/jiechen/p/4712631.html （自定义滚动条原理）
												


											
HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等的更多相关文章
	

    
								
  1. css滚动条样式自定义
		
    很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
    
		
    2. 
						
  2. css 滚动条样式
		
    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...
    
		
    3. 
						
  3. css滚动条样式修改
		
    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...
    
		
    4. 
						
  4. CSS滚动条样式定制
		
    效果图如下 <!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scrol ...
    
		
    5. 
						
  5. CSS滚动条样式设置
		
    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...
    
		
    6. 
						
  6. [CSS]滚动条样式设置
		
    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...
    
		
    7. 
						
  7. css滚动条样式
		
    1.横向滚动条:(abeamScroll) <div style="width:400px;height:200px;overflow-x:auto;overflow-y:hidden ...
    
		
    8. 
						
  8. 使用css实现无滚动条滚动+使用插件自定义滚动条样式
		
    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...
    
		
    9. 
						
  9. 如何自定义CSS滚动条的样式？
		
    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 洛谷P1164小A点菜
			
    这也是一道01背包的题 用的方法比较的巧妙.这个动态规划相当于反过来做的,自己理解就知道了.代码很短 #include<bits/stdc++.h> using namespace std ...
    
			
    2. 
						
  2. Java是什么？我们为什么要学习Java？
			
    Dear All: 首先请允许我为大家介绍下什么是Java?,我们为什么要学Java? 1.Java名字的由来 : Java名字的由来,实际上是一个有趣的故事,我们所见到的Java标志,总是一杯热咖啡 ...
    
			
    3. 
						
  3. Java 数值计算精度问题
			
    最近刚好做到涉及金额方面的项目,不像普通in,double,floatt类型来修饰,而是用BigDecimal来修饰,就去收集下了这方面的资料,整理如下: 1.float和double只能用来做科学计 ...
    
			
    4. 
						
  4. 三十二、MySQL 导出数据
			
    MySQL 导出数据 MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中 ...
    
			
    5. 
						
  5. 第9课 文章模块分析及建表 Thinkphp5商城第四季
			
    目录 文章模块的分析 表结构 文章模块的分析 表结构 CREATE TABLE `tp_cate` ( `id` smallint(6) NOT NULL AUTO_INCREMENT COMMENT ...
    
			
    6. 
						
  6. 大数据小项目之电视收视率企业项目08--》MapReduce编写之Wordcount
			
    编程规范 (1)用户编写的程序分成三个部分:Mapper,Reducer,Driver(提交运行mr程序的客户端) (2)Mapper的输入数据是KV对的形式(KV的类型可自定义) (3)Mapper ...
    
			
    7. 
						
  7. makefile学习（2）
			
    新建目录如下: ├─include │ integrate.h │ └─src │ integrate.c │ main.c │ makefile │ └─obj obj用于存放object文件. m ...
    
			
    8. 
						
  8. HDU：2846-Repository
			
    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2846 Repository Time Limit: 2000/1000 MS (Java/Others) ...
    
			
    9. 
						
  9. BFS：Open and Lock(一个数的逐位变化问题的搜索)
			
    解体心得: 1.关于定义四维数组的问题,在起初使用时,总是在运行时出错,找了很多方法,最后全部将BFS()部分函数写在主函数中,将四维数组定义在主函数中才解决了问题.运行成功后再次将四维数组定义为全局 ...
    
			
    10. 
						
  10. 2、大O表示法
			
    一.大O表示法 大O表示法不是一种算法.它是用来表示一个算法解决问题的速度的快慢.一般我们描述一件事情完成的快慢是用时间描述的,比如说我完成一道计算题用了多少分钟.但算法的运算是很难用准确的时间来描述 ...
    
			
    11.