1. 地址：https://github.com/wilsonfletcher/Optiscroll
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="MobileOptimized" content="320">
  6.     <meta name="format-detection" content="telephone=no">
  7.     <meta name="viewport" content="user-scalable=no, initial-scale=1.0">
  8.     <title>Optiscroll.js</title>
  9.  
  10.     <link rel="stylesheet" href="Optiscroll/css/optiscroll.css">
  11.     <style type="text/css">
  12.         * { box-sizing: border-box; }
  13.         html, body { margin: 0; border: none; width: 100%; height: 100%; overflow-y: scrolll; font: 21px/1.6 sans-serif; }
  14.         .m-wrapper { width: 100%; height: 100%; }
  15.         .column { width: 50%; height: 15rem; background: #f5f5f5; }
  17.         #m-wrapper > .optiscroll-v .optiscroll-vtrack { opacity: 1; }
  18.         .m-wrapper > .optiscroll-v .optiscroll-vtrack{background: red;height: 30px;width: 10px;border-radius: 10px}
  19.         #os1 > .optiscroll-v .optiscroll-vtrack { opacity: 1; }
  20.         .os1 > .optiscroll-v .optiscroll-vtrack{background: red;height: 30px;width: 10px;border-radius: 10px}
  21.     </style>
  22.  
  23.     <script type="text/javascript" src="Optiscroll/js/optiscroll.js"></script>
  24.  
  25.     <script type="text/javascript" src="Optiscroll/js/scrollbar.js"></script>
  26.  
  27. </head>
  28. <body>
  29. test
  30. <div id="m-wrapper" class="m-wrapper optiscroll">
  31.  
  32.     <h1>Optiscroll</h1>
  33.     <p>
  34.         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.
  35.     </p>
  36.  
  37.     <h2>Nested</h2>
  38.  
  39.     <div id="os1" class="os1 optiscroll column">
  40.         <p>
  41.             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.
  42.         </p>
  43.         <p>
  44.             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.
  45.         </p>
  46.         Lorem ipsum dolor sit amet
  47.         <!-- comment -->
  48.     </div>
  49.  
  50.     <h2>Lorem</h2>
  51.     <p>
  52.         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>
  53.         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.
  54.     </p>
  55.     <p>
  56.         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.
  57.     </p>
  58.     <p>
  59.         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.
  60.     </p>
  61.  
  62.     <script type="text/javascript">
  63.         var os1 = new Optiscroll(document.getElementById('os1'), { maxTrackSize: 20 });
  64.     </script>
  65.  
  66. </div>
  67.  
  68. <script type="text/javascript">
  69.     var wr = new Optiscroll(document.getElementById('m-wrapper'), { forceScrollbars: true });
  70. </script>
  71.  
  72. </body>
  73. </html>
  1.  

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

  1. ios开发之修改 UITableview 滚动条颜色的方法

    UITableview 的滚动条默认颜色是黑色的,如果 UItableview 背景也是深颜色,则滚动条会变的很不明显.您可以用下面这行代码来改变滚动条的颜色 self.tableView.indic ...

  2. word中如何只修改英文的颜色

    替换->更多->使用通配符,查找[a-zA-Z],替换为^&,字体选红色

  3. 修改cocos2dx 背景颜色

    只需要在AppDelegate的设置FPS后面加入一行: glClearColor(1.0, 1.0, 1.0, 1.0); 同理如果要修改成其它颜色,只需修改里面的值即可( r, g, b, a);

  4. Android Studio －修改LogCat的颜色

    Android Studio -修改LogCat的颜色 author:Kang,Leo weibo:http://weibo.com/kangyi 效果图 设置 Preference->Edit ...

  5. 复选框输入Android Studio 如果修改LogCat的颜色，默认全是黑色看着挺不舒服的

    今天一直在查找复选框输入之类的问题,上午正好有机会和大家分享一下. 怎么找到并表现LogCat这里就不需要再讲了吧,主要说一下本篇的主题,如何修改他的颜色 .我们在使用Eclipse的时候应该都用过L ...

  6. 修改tabbar 字体颜色

    NSDictionary *seletedTextAttrs = @{NSForegroundColorAttributeName:[UIColor orangeColor]}; 修改tabbar 字 ...

  7. 如何解决在GDI画图中，多次修改画笔的颜色

    首先创建个画笔对象: CPen gPen;gPen.CreatePen(PS_SOLID, 1, RGB(120,120,130));//一定灰度的画笔〈/br〉CPen* pOldPen = pDC ...

  8. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  9. 修改UISearchBar背景颜色

    UISearchBar是由两个subView组成的,一个是UISearchBarBackGround,另一个是UITextField. 要IB中没有直接操作背景的属性.方法一:是直接将 UISearc ...

随机推荐

  1. JBoss+Ant实现EJB无状态会话bean实例

    EJB分为session bean.entity bean.message-driven bean,session bean又分为无状态会话bean和有状态会话bean. session bean负责 ...

  2. npoi 使用方法

    不少朋友在做项目的过程中或多或少的都会用到excel导入.导出功能,下面我来给大家介绍一下使用NPOI如何导入.导出excel, 通过代码描述一下npoi的使用方法,希望都够给需要的朋友一点点帮助,也 ...

  3. Ubuntu切换至root用户

    第一种方式: 使用命令 sudo passwd root 设置root用户的密码 然后su root即可切换至root用户  第二种方式: sudo bash

  4. 2014.9.3数据库CRUD

    CRUD 增删改查 DCL 数据控制语言:备份,grant DML 数据操作语言: CRUD DDL 数据定义语言:create drop alter 自增长列不能赋值 增: Insert into  ...

  5. CocoaPods 出现 OTHER_LDFLAGS 错误的解决方法

    CocoaPods 出现 OTHER_LDFLAGS 错误的解决方法 在一些项目中运行 pod install 后经常会出现如下错误 [!] The target `项目名 [Debug]` over ...

  6. spring mvc 的基本注解

    刚开始学习spring mvc 有很多东西不是很了解 spring mvc 四个基本注解 annotation(控制层,业务层,持久层) -- @Component.@Repository   @Se ...

  7. Anndroid 开发架构读书笔记

    市面上大部分应用不外乎就是颠过来倒过去地做以下这些事情: --------------- --------------- --------------- --------------- | | | | ...

  8. github/python/ show me the code 25题（二）

    第 0014 题: 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示: { "1":["张三",150,120,100], &q ...

  9. Windows Phone

    错误: DEP6100 : 引导阶段“正在连接到设备”出现以下意外错误: SmartDeviceException - Windows Phone IP over USB Transport (IpO ...

  10. SQL Server 数据库所有者

    1. 数据库所有者应当永远是 sa 用户 2. 改变数据库的所有者 alter authorization on database :: databaseName to sa; -- 这一句话把数据库 ...