1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  
  5.      <style type='text/css'>
  6.  
  7.          html{
  8.                  overflow: hidden;
  9.              }
  10.  
  11.  #scroll{
  12.              width: 800px;
  13.              margin: 100px auto;
  14.              padding: 10px 30px 10px 10px;
  15.              border: 1px solid #ccc;
  16.              border - radius: 4px;
  17.              height: 500px;
  18.              overflow: hidden;
  19.              position: relative;
  20.          }
  21.  #scroll-bar{
  22.          position:absolute;
  23.              width:10px;
  24.              left: 0px;
  25.              top: 0px;
  26.              border-left: 1px solid #ccc;
  27.              border-radius: 4px;
  28.          }
  29.  #bar{
  30.              width:10px;
  31.              border-top: 1px solid #ccc;
  32.              border-bottom: 1px solid #ccc;
  33.              border-radius: 4px;
  34.              background-color: #ccc;
  35.          }
  36.      </style>
  37.  </head>
  38.  <body>
  39.      <div id = 'scroll'>
  40.          <div id='content'>
  41.              <p>
  42.                  <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:
  43.  0; orphans:0; font-size:12pt">
  44.                  <span style="font-family:''微软雅黑''"> 
  45.                   我们不可以借口发展经济而污染环境。
  46.                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  47.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  48.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  49.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  50.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  51.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  52.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  53.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  54.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  55.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  56.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  57.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  58.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  59.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  60.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  61.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  62.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  63.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  64.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  65.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  66.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  67.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  68.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  69.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  70.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  71.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  72.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  73.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  74.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  75.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  76.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  77.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  78.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  79.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  80.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  81.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  82.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  83.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  84.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  85.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  86.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  87.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  88.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  89.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  90.                   我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
  91.                   我们不可以借口发展经济而污染环境。
  92.                  （on the pretence of）
  93.                  </span>
  94.                  </p>
  95.                  <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:0; orphans:0; font-size:12pt"><span style="font-family:''微软雅黑''"> </span></p>
  96.              </p>
  97.          </div>
  98.          <div id='scroll-bar'>
  99.                <div id = 'bar'></div>
  100.          </div>
  101.      </div>
  102.  
  103.            <script type = 'text/javascript'>
  104.              // 原理就是 框体有大小，内容无大小，框体超出部分隐藏 内容自动撑开, 根据比例获得滑块和滑框来进行滑动,滑块到顶部的距离，再换算成 内容-margin-top
  105.              window.onload = function(){
  106.                  var scroll = document.getElementById('scroll');
  107.                  var content = document.getElementById('content');
  108.                  var scrollBar = document.getElementById('scroll-bar');
  109.                  var bar = document.getElementById('bar');
  110.                  var scrollH = scroll.offsetHeight;
  111.                  var contentH = content.offsetHeight;
  112.                  // 滚动条框 和框体的高度是一样的
  113.                  scrollBar.style.height = scrollH + 'px';
  114.                  // 开始我想用right的,但是ie7 不兼容
  115.                  scrollBar.style.left = scroll.offsetWidth - 12 + 'px';
  116.                  // 滚动条的高度等于 框体高*(框体的高度比上内容的高度) (小学数学);
  117.                  bar.style.height = scrollH * (scrollH / contentH) + 'px';
  118.                  var isMove = false;//是否开启滑动
  119.                  var oldY = 0;//滑动之前的老位置 初始化为0
  120.                  bar.onmousedown = function(event){
  121.                      var event = event || window.event;
  122.                      oldY = event.clientY;
  123.                      isMove = true;
  124.                              return false;
  125.                  }
  126.              document.onmouseup  = function(){
  127.                  isMove = false;
  128.                  return false;
  129.              }
  130.              document.onmousemove = function(event){
  131.                  var event = event || window.event;
  132.                  if (isMove) {
  133.                      // 滚动条变化的值 dirY
  134.                      var dirY = event.clientY - oldY;
  135.                      goOn(dirY);
  136.                      oldY = event.clientY;
  137.                  }
  138.              }
  139.      // 滚动事件
  140.      scroll.onmousewheel = function(event)
  141.      {
  142.          var event  = event || window.event;
  143.          // event.wheelDelta 每次滚动都是+-120  这里设置一个系数 120 太大了更适合浏览器的滚动
  144.          goOn(-event.wheelDelta * 0.2);
  145.          return false;
  146.      }
  147.      function goOn(dirY)
  148.      {
  149.          // 滚动条滚动
  150.          bar.style.marginTop = bar.offsetTop + dirY + 'px';
  151.          // 越界处理
  152.          if (bar.offsetTop < 0)
  153.          {
  154.              bar.style.marginTop = '0px';
  155.          }
  156.          if ((bar.offsetTop + bar.offsetHeight) > scrollBar.offsetHeight)
  157.          {
  158.              bar.style.marginTop = scrollBar.offsetHeight - bar.offsetHeight + 'px';
  159.          }
  160.          // 内容框的margin-top
  161.          content.style.marginTop = -bar.offsetTop / ((scrollH - 10) / contentH) + 'px';
  162.      }
  163.  }
  164.      </script>
  165.  </body>
  166.  
  167.  </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. 通过python脚本获取服务器硬件信息

    #!/usr/bin/python # coding:utf-8 """ 采集机器自身信息 1 主机名 2 内存 3 ip与mac地址 4 cpu信息 5 硬盘分区信息 ...

  2. 使用参数innodb_file_per_table支持MySQL InnoDB表数据共享空间自动收缩

    http://heylinux.com/archives/2367.html http://blog.csdn.net/ywh147/article/details/8996022 使用过MySQL的 ...

  3. 嵌入式程序设计中C/C++代码的优化

    虽然使软件正确是一个工程合乎逻辑的最后一个步骤,但是在嵌入式的系统开发中,情况并不总是这样的.出于对低价产品的需求,硬件的设计者需要提供刚好足够的存储器和完成工作的处理能力.所以在嵌入式软件设计的最后 ...

  4. jenkins每次构建前删除工作目录操作

    背景: 想在拉取代码前,删除代码,结果百度白天找到答案,mark下 需要安装Workspace Cleanup Plugin插件, 再看创建任务项,勾选即可实现

  5. PHP use闭包函数

    <?php class Cart { //产品价格 const PRICE_BUTTER = 1.00; const PRICE_MILK = 3.00; const PRICE_EGGS = ...

  6. vi快速查找

    用vim时,想高亮显示一个单词并查找的方发,将光标移动到所找单词. 1: shift + "*"  向下查找并高亮显示 2: shift + "#"  向上查找 ...

  7. js——类型转换

      总述                   类型转换:显式.隐式(自动) 隐式转换是由编译器自动进行的,基本主要抽象操作有ToPrimitive, ToNumber, ToString, ToBoo ...

  8. jmeter测试mysql遇到的问题

    1. 1.防火墙未关 错误: Communications link failure The last packet sent successfully to the server was 0 mil ...

  9. Centos7 linux 卸载自带安装的jdk 并yum自动安装jdk1.8

    一:卸载系统自带安装的JDK 注:本文参考了< 使用CentOS7卸载自带jdk安装自己的JDK1.8> 通过xshell工具成功连接安装好的虚拟机之后可通过    rpm -qa | g ...

  10. Confluence 6 识别慢性能的宏

    Page Profiling 给你了有关页面在载入的时候操作缓慢的邪教,你可以将下面的内容添加到调试(debug)级别: Version 3.1 及其后续版本 设置包名字为 com.atlassian ...