<!DOCTYPE html>

 <html lang="en">

 <head>

     <style type='text/css'>

         html{

                 overflow: hidden;

             }

 #scroll{

             width: 800px;

             margin: 100px auto;

             padding: 10px 30px 10px 10px;

             border: 1px solid #ccc;

             border - radius: 4px;

             height: 500px;

             overflow: hidden;

             position: relative;

         }

 #scroll-bar{

         position:absolute;

             width:10px;

             left: 0px;

             top: 0px;

             border-left: 1px solid #ccc;

             border-radius: 4px;

         }

 #bar{

             width:10px;

             border-top: 1px solid #ccc;

             border-bottom: 1px solid #ccc;

             border-radius: 4px;

             background-color: #ccc;

         }

     </style>

 </head>

 <body>

     <div id = 'scroll'>

         <div id='content'>

             <p>

                 <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:

 0; orphans:0; font-size:12pt">

                 <span style="font-family:''微软雅黑''"> 

                  我们不可以借口发展经济而污染环境。

                 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。

                  我们不可以借口发展经济而污染环境。

                 （on the pretence of）

                 </span>

                 </p>

                 <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:0; orphans:0; font-size:12pt"><span style="font-family:''微软雅黑''"> </span></p>

             </p>

         </div>

         <div id='scroll-bar'>

               <div id = 'bar'></div>

         </div>

     </div>

           <script type = 'text/javascript'>

             // 原理就是 框体有大小，内容无大小，框体超出部分隐藏 内容自动撑开, 根据比例获得滑块和滑框来进行滑动,滑块到顶部的距离，再换算成 内容-margin-top

             window.onload = function(){

                 var scroll = document.getElementById('scroll');

                 var content = document.getElementById('content');

                 var scrollBar = document.getElementById('scroll-bar');

                 var bar = document.getElementById('bar');

                 var scrollH = scroll.offsetHeight;

                 var contentH = content.offsetHeight;

                 // 滚动条框 和框体的高度是一样的

                 scrollBar.style.height = scrollH + 'px';

                 // 开始我想用right的,但是ie7 不兼容

                 scrollBar.style.left = scroll.offsetWidth - 12 + 'px';

                 // 滚动条的高度等于 框体高*(框体的高度比上内容的高度) (小学数学);

                 bar.style.height = scrollH * (scrollH / contentH) + 'px';

                 var isMove = false;//是否开启滑动

                 var oldY = 0;//滑动之前的老位置 初始化为0

                 bar.onmousedown = function(event){

                     var event = event || window.event;

                     oldY = event.clientY;

                     isMove = true;

                             return false;

                 }

             document.onmouseup  = function(){

                 isMove = false;

                 return false;

             }

             document.onmousemove = function(event){

                 var event = event || window.event;

                 if (isMove) {

                     // 滚动条变化的值 dirY

                     var dirY = event.clientY - oldY;

                     goOn(dirY);

                     oldY = event.clientY;

                 }

             }

     // 滚动事件

     scroll.onmousewheel = function(event)

     {

         var event  = event || window.event;

         // event.wheelDelta 每次滚动都是+-120  这里设置一个系数 120 太大了更适合浏览器的滚动

         goOn(-event.wheelDelta * 0.2);

         return false;

     }

     function goOn(dirY)

     {

         // 滚动条滚动

         bar.style.marginTop = bar.offsetTop + dirY + 'px';

         // 越界处理

         if (bar.offsetTop < 0)

         {

             bar.style.marginTop = '0px';

         }

         if ((bar.offsetTop + bar.offsetHeight) > scrollBar.offsetHeight)

         {

             bar.style.marginTop = scrollBar.offsetHeight - bar.offsetHeight + 'px';

         }

         // 内容框的margin-top

         content.style.marginTop = -bar.offsetTop / ((scrollH - 10) / contentH) + 'px';

     }

 }

     </script>

 </body>

 </html>

js自定义滚动样式的更多相关文章

  1. pixi.js 自定义光标样式

    pixi 介绍 Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而制作游戏或应用. 项目地址:https://github.com/pixijs/p ...

  2. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  3. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  4. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  5. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  6. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  7. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  8. handlebars.js 自定义helper（过滤）

    将对象数据渲染到页面上: id 插入公共样式: handlebars.js 自定义helper(过滤)demo <script id="tbody-content-template&q ...

  9. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

随机推荐

  1. 修改JDK版本配置

    我使用的maven是3.0.5版本的,在创建项目的时候,默认使用的jdk为1.5版本 在项目的pom.xml中添加如下配置可修改使用的jdk版本. <properties> <!-- ...

  2. Linux命令之nohup和重定向

    用途:不挂断地运行命令.语法:nohup Command [ Arg ... ] [ & ]描述:nohup 命令运行由 Command 参数和任何相关的 Arg 参数指定的命令,忽略所有挂断 ...

  3. [HTTP]HTTP 中的 Transfer-Encoding 报文头

    一.背景: 持续连接的问题:对于非持续连接,浏览器可以通过连接是否关闭来界定请求或响应实体的边界:而对于持续连接,这种方法显然不奏效.有时,尽管我已经发送完所有数据,但浏览器并不知道这一点,它无法得知 ...

  4. 46)django-发送邮件

    django已封装好了邮件发送功能,可以直接调用发送模块 1. 配置相关参数 如果用的是 阿里云的企业邮箱,则类似于下面: 在 settings.py 的最后面加上类似这些 EMAIL_BACKEND ...

  5. Android中播放音乐的几种方式

    前言 前几天一直在研究RxJava2,也写了记录了几篇博客,但因为工作任务原因,需要研究音频相关的知识,暂时放下Rxjava,本文的demo中,MediaPalyer 部分使用RxJava编写一点逻辑 ...

  6. LuoGu P1006 传纸条

    题目传送门 这题嘛...方格取数和这题一样一样的 只不过这题是从左上到右下再回去罢了(来回一趟和来两趟有区别么?没有,那么这题和上题用一样的转移和状态就行了 没什么好说的,说一下我的错误好了: 人家图 ...

  7. Confluence 6 管理协同编辑 - 关于 Synchrony

    协同编辑能够让项目小组中的协同合作达到下一个高度.这个页面对相关协同编辑中的问题进行了讨论,能够提供给你所有希望了解的内容. 进入 Collaborative editing 页面来获得项目小组是如何 ...

  8. Confluence 6 为翻译显示用户界面的键（Key）名称

    这个功能在你使用 Confluence 用户界面为 Confluence 创建翻译的时候会非常有用.当你打开主面板的时候,在你访问的 URL 的最后面添加下面的文字:can add the follo ...

  9. SpringIOC框架详解

    1.SpringIOC是什么? 就是一个用来管理实体类bean的容器 2.创建cppdy.xml文件(模拟springmvc.xml文件) <?xml version="1.0&quo ...

  10. day05流程控制while循环 流程控制for循环

    1.什么是循环:循环就是重复做某事 2.为何要有循环:为了计算机能够具备人重复做某事的能力 3,.如何用循环: 1.结束while循环的两种方法:1.修改条件:等到下一次循环开始时判断,条件为假才会结 ...