地址：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. [LeetCode][Python]Largest Number
			
    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/largest ...
    
			
    2. 
						
  2. CSS实现宽高成比例缩放
			
    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢.         html代 ...
    
			
    3. 
						
  3. [置顶] How to compile openjdk 7 in RHEL5
			
    1. 为什么要编译openjdk的code? 因为从Eclipse调试JDK的代码时,方法中的局部变量不能显示,这样是因为编译JDK时,没有编译成debug版本. 2. RHEL5中自带的开发者JDK ...
    
			
    4. 
						
  4. kettle中调用java类
			
    kettle中调用java类 有时须要在kettle调用java类,如:验证.查询或自己定义加密等.有时甚至连主要的数据訪问都不那么简单,如获取一个存储文件或使用一个数据库连接,某些数据源可能封装在应 ...
    
			
    5. 
						
  5. MySQL数据处理函数
			
    数据处理函数 有时从数据库表中获取到的数据须要进行一些处理. 如将小写字母替换为对应的大写字母.这个处理过程能够在客户机上进行.也能够在数据库上进行. 数据库上进行会更高效.数据库中有对应的数据处理函 ...
    
			
    6. 
						
  6. OkHttp–支持SPDY协议的高效HTTP库
			
    Android为我们提供了两种HTTP交互的方式: HttpURLConnection 和 Apache HTTP Client,虽然两者都支持HTTPS,流的上传和下载,配置超时,IPv6和连接池, ...
    
			
    7. 
						
  7. 常用的连接字符串（vs中连接sqlserver）方便随时查看
			
    Sql Server身份验证有两种,一种是Windows身份验证,还有一种是Sql Server 身份验证 Windows身份验证连接字符串: string connectionString = &q ...
    
			
    8. 
						
  8. web开发 - 从零开始 - 02 - 常用标签
			
    1.a  : href 属性为id,即为锚点:文件路径,则为下载链接: 新窗口打开文件,target = "_blank";当前窗口打开,target="_self&qu ...
    
			
    9. 
						
  9. ORACLE恢复误删除的对象(表、存储过程等)
			
    1.恢复存储过程 原理就是利用了oracle里所有的存储过程的源代码都是存在dba_source里,而drop某个存储过程的时候,oracle这里肯定要去dba_source里把相关的源代码给dele ...
    
			
    10. 
						
  10. 原生js判断某个元素是否有指定的class名的几种方法
			
    [注意]以下方法只对class只有一个值的情况下操作 ************************************************************* 结构部分: <d ...
    
			
    11.