地址：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. date tod = boost::gregorian::day_clock::local_day(); //当前日期
			
    boost 时间和日期 - 苦逼码农 - 博客频道 - CSDN.NET date tod = boost::gregorian::day_clock::local_day(); //当前日期
    
			
    2. 
						
  2. java多线程向数据库写入数据
			
    任务: 从sqlserver中将一个表A(约16W条数据)导到mysql中对应的一个表B中. 思路:分段获取A表中的数据后,用多个线程同时向B表中写入. 关键代码 //将数据库中的数据条数分段 pub ...
    
			
    3. 
						
  3. Android入门第十六篇之Style与Theme [转]
			
    本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 越来越多互联网企业都在Android平台上部署其客户端,为了提升用户体验,这些客户端都做得布局合理而且美观.. ...
    
			
    4. 
						
  4. XML编程与应用-读取XML
			
    实例:使用XmlTextReader类的对象读取XML文档 代码如下 using System; using System.Collections.Generic; using System.Linq ...
    
			
    5. 
						
  5. IOS8 设置TableView Separatorinset 分割线从边框顶端开始
			
    IOS8 设置TableView Separatorinset 分割线从边框顶端开始   在ios8上 [TableViewsetSeparatorInset:UIEdgeInsetsMake(0,0 ...
    
			
    6. 
						
  6. 张孝祥Java高新技术汇总
			
    一.自动装箱和拆箱: 在Java中有8种基本数据类型:byte,short,int,long,float,double,char,boolean.而基本数据类型不是对象,这时人们给他们定义了包装类,使 ...
    
			
    7. 
						
  7. Java的基本语法
			
    Java基本语法格式 Java基本语法格式 Java中的所有程序代码都必须存在于一个类中,用class关键字定义类,在class前面可以有一些修饰符. 修饰符 class 类名{ 程序代码} 注: ① ...
    
			
    8. 
						
  8. jQ中prop与attr的区别
			
    1.prop适用于HTML元素本身就带有的固有属性 2.attr适用于HTML元素我们自定义的属性 <input type="checkbox" value="复选 ...
    
			
    9. 
						
  9. 批处理[Batch]
			
    批处理 1. 定义:就是一堆DOS命令按一定顺序排列而形成的集合. 英文译为BATCH,批处理文件后缀BAT就取的前三个字母. 示例1:a.bat @echo off Netstat –a –n &g ...
    
			
    10. 
						
  10. Umbraco学习1------安装
			
    最近在做一个公益项目,考虑到成本和性价比,最终决定还是选用Umbraco作为CMS平台进行开发. 顺便也借机将Umbraco的使用整理成系列,便于以后的记忆. Umbraco的所有信息,基本都可以在h ...
    
			
    11.