地址：https://github.com/wilsonfletcher/Optiscroll

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="MobileOptimized" content="320">

    <meta name="format-detection" content="telephone=no">

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0">

    <title>Optiscroll.js</title>

    <link rel="stylesheet" href="Optiscroll/css/optiscroll.css">

    <style type="text/css">

        * { box-sizing: border-box; }

        html, body { margin: 0; border: none; width: 100%; height: 100%; overflow-y: scrolll; font: 21px/1.6 sans-serif; }

        .m-wrapper { width: 100%; height: 100%; }

        .column { width: 50%; height: 15rem; background: #f5f5f5; }

        #m-wrapper > .optiscroll-v .optiscroll-vtrack { opacity: 1; }

        .m-wrapper > .optiscroll-v .optiscroll-vtrack{background: red;height: 30px;width: 10px;border-radius: 10px}

        #os1 > .optiscroll-v .optiscroll-vtrack { opacity: 1; }

        .os1 > .optiscroll-v .optiscroll-vtrack{background: red;height: 30px;width: 10px;border-radius: 10px}

    </style>

    <script type="text/javascript" src="Optiscroll/js/optiscroll.js"></script>

    <script type="text/javascript" src="Optiscroll/js/scrollbar.js"></script>

</head>

<body>

test

<div id="m-wrapper" class="m-wrapper optiscroll">

    <h1>Optiscroll</h1>

    <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id nibh dictum ex ultrices pellentesque non eget eros. Sed pellentesque in lorem ac porttitor. Phasellus consectetur risus eu quam pellentesque, at malesuada odio hendrerit. Morbi vitae commodo lectus. In hac habitasse platea dictumst. Quisque placerat arcu ac risus pretium, a efficitur elit hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    </p>

    <h2>Nested</h2>

    <div id="os1" class="os1 optiscroll column">

        <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id nibh dictum ex ultrices pellentesque non eget eros. Sed pellentesque in lorem ac porttitor. Phasellus consectetur risus eu quam pellentesque, at malesuada odio hendrerit. Morbi vitae commodo lectus. In hac habitasse platea dictumst. Quisque placerat arcu ac risus pretium, a efficitur elit hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

        </p>

        <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id nibh dictum ex ultrices pellentesque non eget eros. Sed pellentesque in lorem ac porttitor. Phasellus consectetur risus eu quam pellentesque, at malesuada odio hendrerit. Morbi vitae commodo lectus. In hac habitasse platea dictumst. Quisque placerat arcu ac risus pretium, a efficitur elit hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

        </p>

        Lorem ipsum dolor sit amet

        <!-- comment -->

    </div>

    <h2>Lorem</h2>

    <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id nibh dictum ex ultrices pellentesque non eget eros. Sed pellentesque in lorem ac porttitor. <br>

        Phasellus consectetur risus eu quam pellentesque, at malesuada odio hendrerit. Morbi vitae commodo lectus. In hac habitasse platea dictumst. Quisque placerat arcu ac risus pretium, a efficitur elit hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    </p>

    <p>

        Nunc pulvinar, orci et lacinia malesuada, quam augue auctor libero, et egestas neque leo sit amet dolor. Quisque rhoncus vulputate tortor, in ultricies neque fringilla in. Aenean placerat purus vitae rhoncus tincidunt. Nullam varius erat nec fringilla porta. Sed at mi ac ipsum ultrices gravida. Duis quis auctor dolor. Cras tempus, tellus ut sodales consequat, velit elit pulvinar est, vitae venenatis odio felis ut augue. Phasellus rutrum justo ac leo tincidunt, convallis elementum magna malesuada. Nulla eget turpis a metus molestie auctor. Quisque sollicitudin ultrices elementum. Suspendisse tempor scelerisque fermentum. Phasellus dictum massa quis est sagittis, quis placerat sapien ullamcorper. Curabitur enim ex, bibendum at scelerisque a, congue et nunc. Aenean tincidunt sodales leo, vel lacinia neque posuere facilisis. Ut rhoncus egestas nunc, ac bibendum mi efficitur vitae. Curabitur tincidunt nibh eget nisi dictum, blandit dignissim ex maximus.

    </p>

    <p>

        Etiam tempor imperdiet molestie. Phasellus imperdiet eros sed elit cursus, ut luctus quam varius. Nulla et suscipit ipsum. Proin hendrerit tellus sit amet lacinia euismod. Integer sit amet blandit velit. Donec eu maximus ex. Pellentesque sodales magna in rhoncus tempor. Sed tincidunt risus id turpis tristique, aliquet congue erat suscipit. Aenean ligula arcu, venenatis a tristique in, elementum eget tellus.

    </p>

    <script type="text/javascript">

        var os1 = new Optiscroll(document.getElementById('os1'), { maxTrackSize: 20 });

    </script>

</div>

<script type="text/javascript">

    var wr = new Optiscroll(document.getElementById('m-wrapper'), { forceScrollbars: true });

</script>

</body>

</html>
												


											
OptiScroll 公共例子（只修改了滚动条颜色）的更多相关文章
	

    
								
  1. ios开发之修改 UITableview 滚动条颜色的方法
		
    UITableview 的滚动条默认颜色是黑色的,如果 UItableview 背景也是深颜色,则滚动条会变的很不明显.您可以用下面这行代码来改变滚动条的颜色 self.tableView.indic ...
    
		
    2. 
						
  2. word中如何只修改英文的颜色
		
    替换->更多->使用通配符,查找[a-zA-Z],替换为^&,字体选红色
    
		
    3. 
						
  3. 修改cocos2dx 背景颜色
		
    只需要在AppDelegate的设置FPS后面加入一行: glClearColor(1.0, 1.0, 1.0, 1.0); 同理如果要修改成其它颜色,只需修改里面的值即可( r, g, b, a);
    
		
    4. 
						
  4. Android Studio －修改LogCat的颜色
		
    Android Studio -修改LogCat的颜色 author:Kang,Leo weibo:http://weibo.com/kangyi 效果图 设置 Preference->Edit ...
    
		
    5. 
						
  5. 复选框输入Android Studio 如果修改LogCat的颜色，默认全是黑色看着挺不舒服的
		
    今天一直在查找复选框输入之类的问题,上午正好有机会和大家分享一下. 怎么找到并表现LogCat这里就不需要再讲了吧,主要说一下本篇的主题,如何修改他的颜色 .我们在使用Eclipse的时候应该都用过L ...
    
		
    6. 
						
  6. 修改tabbar 字体颜色
		
    NSDictionary *seletedTextAttrs = @{NSForegroundColorAttributeName:[UIColor orangeColor]}; 修改tabbar 字 ...
    
		
    7. 
						
  7. 如何解决在GDI画图中，多次修改画笔的颜色
		
    首先创建个画笔对象: CPen gPen;gPen.CreatePen(PS_SOLID, 1, RGB(120,120,130));//一定灰度的画笔〈/br〉CPen* pOldPen = pDC ...
    
		
    8. 
						
  8. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
		
    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...
    
		
    9. 
						
  9. 修改UISearchBar背景颜色
		
    UISearchBar是由两个subView组成的,一个是UISearchBarBackGround,另一个是UITextField. 要IB中没有直接操作背景的属性.方法一:是直接将 UISearc ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Netfilter-packet-flow.svg
			
    调试网络的方法:(Debugging the kernel using Ftrace)  $ watch -n1 -d sudo cat /proc/net/snmp$ watch -n1 -d su ...
    
			
    2. 
						
  2. Pie（求最小身高差，dp）
			
    Pie Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
    
			
    3. 
						
  3. 弹飞DZY（思维，打表，还没过全，先放着）
			
    弹飞DZYDescription某天,机智的ZZC发明了一种超级弹力装置,为了在他的朋友DZY面前显摆,他邀请DZY一起玩个游戏.游戏一开始,ZZC在地上沿着一条直线摆上n个装置,每个装置设定初始弹力 ...
    
			
    4. 
						
  4. 视频日志之android的总结与思考
			
    四月份开始学android,并着手做这个项目,腾讯面试实习忙了半个月没有再做最终铩羽而归.做到5月30日,做了一个交差版,停下了差不多一个月,这两天再捡起完善一点. 项目是做一个视频保存和分享的网站, ...
    
			
    5. 
						
  5. Mahout源码MeanShiftCanopyDriver分析之二MeanShiftCanopyMapper仿造
			
    首先更正一点,昨天处理数据的时候是有问题的,直接从网页中拷贝的文件的空格是有问题的,直接拷贝然后新建的文件中的空格可能有一个两个.三个的,所以要把两个或者三个的都换为一个,在InputMapper中下 ...
    
			
    6. 
						
  6. 初识Maven
			
    今天开始学习怎样使用maven,听起来挺神奇的东西,我们来一步一步的加以剖析. Maven的一些具体的论文的东西,网上很多博客介绍,这里我就不逐一介绍,下面我们从安装maven开始讲解: (1)Mav ...
    
			
    7. 
						
  7. C# 文件帮助类
			
    using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; us ...
    
			
    8. 
						
  8. 数据库MySQL多个数据库服务冲突
			
    一.目标名称 MySQL 二.目标版本 mysql-5.6.24-win32.1432006610.zip 三.环境信息 系统:windows 7 旗舰版 防火墙:关闭  —— 注意:如果防火墙不关闭 ...
    
			
    9. 
						
  9. J - 搞笑版费马大定理
			
    J - 搞笑版费马大定理 Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%lld & %llu Submit  ...
    
			
    10. 
						
  10. Problem B: 最少步数
			
    DescriptionA friend of you is doing research on theTraveling Knight Problem (TKP) where you are to f ...
    
			
    11.