案例：滚动条

html框架分为4部分，最外面的div, 放文字的div, 装滚动条的div层，以及滚动条本身放在一个div里面

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .box {

      width: 300px;

      height: 500px;

      border: 1px solid red;

      margin: 100px;

      position: relative;

      overflow: hidden;

    }

    .content {

      padding: 5px 18px 5px 5px;

      position: absolute;

      top: 0;

      left: 0;

    }

    .scroll {

      width: 18px;

      height: 100%;

      position: absolute;

      top: 0;

      right: 0;

      background-color: #eee;

    }

    .bar {

      height: 100px;

      width: 100%;

      position: absolute;

      top: 0;

      left: 0;

      background-color: red;

      border-radius: 10px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <div class="box" id="box">

    <div class="content" id="content">

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头

      床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿

    </div>

    <!--文字内容-->

    <div id="scroll" class="scroll">

      <!--装滚动条的层-->

      <div class="bar" id="bar"></div>

      <!--滚动条-->

    </div>

  </div>

  <script src="common.js"></script>

  <script>

    //获取需要的元素

    //最外面的div

    var box = my$("box");

    //文字div

    var content = my$("content");

    //装滚动条的div---容器

    var scroll = my$("scroll");

    //滚动条

    var bar = my$("bar");

    //设置滚动条的高度

    //滚动条的高/装滚动条div的高=box的高/文字div的高

    //滚动条的高=装滚动条div的高*box的高/文字div的高

    var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;

    bar.style.height = height + "px";

    //移动滚动条

    bar.onmousedown = function (e) {

      var spaceY = e.clientY - bar.offsetTop;

      document.onmousemove = function (e) {

        var y = e.clientY - spaceY;

        y = y < 0 ? 0 : y;

        y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;

        bar.style.top = y + "px";

        //设置鼠标移动的似乎和，文字不被选中

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        //滚动条的移动距离/文字的div移动距离=滚动条最大的移动距离/文字div的最大移动距离

        var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight);

        //设置位子div的移动距离

        content.style.marginTop = -moveY + "px";

      };

    };

  </script>

</body>

</html>

JS---案例：滚动条的更多相关文章

  1. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  2. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  3. selenium 执行js,实现滚动条

    今天在写脚本的时候,学习了执行js,实现滚动条,对于scrollTop=10000中这个10000是怎么来的,还不是很了解,先将方法记录一下, 1.滚动条回到顶部: js_up="docum ...

  4. js设置滚动条位置

    JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...

  5. js禁止滚动条移动

    js禁止滚动条移动 var scrollFunc=function(e){ e=e||window.event; if (e&&e.preventDefault){ e.prevent ...

  6. 自动化测试基础篇--Selenium中JS处理滚动条

    摘自https://www.cnblogs.com/sanzangTst/p/7692285.html 前言 什么是JS? JS就是JavaScript: JavaScript 是世界上最流行的脚本语 ...

  7. 2.21 JS处理滚动条

    2.21 JS处理滚动条 前言    selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了.常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到 ...

  8. js 判断滚动条是否停止滚动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  10. selenium - Js处理滚动条操作

    # 11.Js处理滚动条操作 driver.execute_script('arguments[0].scrollIntoView();',target) target 为find_element_b ...

随机推荐

  1. 类欧几里德算法（洛谷 P5170

    #include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...

  2. 【JZOJ3347】树的难题

    description analysis 比较麻烦树形\(DP\) 不过这个我还是不算很懂-- 下次要注意思考,不要怕麻烦 code #pragma GCC optimize("O3&quo ...

  3. 高速网络下的http协议优化

    http协议是基于TCP协议,具备TCP协议的所有功能.但是与一般TCP的长连接不同的是http协议往往连接时间比较短,一个请求一个响应了事.但是总所周知,TCP协议除了具备可靠的传输以外,还有拥塞控 ...

  4. Python面向对象学习

    以下面例子作为面向对象基础介绍,类比java里的面向对象既可以,大同小异 class Employee(): raiseAmount=1.04 employeeNum= def __init__(se ...

  5. python 排序算法总结及实例详解

    python 排序算法总结及实例详解 这篇文章主要介绍了python排序算法总结及实例详解的相关资料,需要的朋友可以参考下 总结了一下常见集中排序的算法 排序算法总结及实例详解"> 归 ...

  6. 密码学笔记(4)——RSA的其他攻击

    上一篇详细分析了几种分解因子的算法,这是攻击RSA密码最为明显的算法,这一篇中我们考虑是否有不用分解模数n就可以解密RSA的密文的方法,这是因为前面也提到,当n比较大的时候进行分解成素数的乘积是非常困 ...

  7. springmvc前端控制器拦截路径的配置报错404

    1.拦截"/",可以实现现在很流行的REST风格.很多互联网类型的应用很喜欢这种风格的URL.为了实现REST风格,拦截除了jsp的所有. 2.拦截/*,拦截所有访问,会导致404 ...

  8. 如何提高Axure设计的效率 提高Axure设计效率的10条建议

    如何更有效率的使用axure,这是新手需要掌握的技能.本文作者从实际经验中归纳出来的十条建议十分值得学习,转载分享给大家: Axure 是创建软件原型的快速有力的工具.上手很容易,但是,其中存在一个危 ...

  9. Luogu P2101 命运石之门的选择(分治+搜索)

    P2101 命运石之门的选择 题意 题目描述 在某一条不知名世界线的冈伦今天突然接到了一条\(dmail\),上面说世界线将会发生巨大变动,未来的他无论如何都无法扭转这种变动回到原来的世界线.而世界线 ...

  10. Java发送http请求发送json对象

    直接上代码: http工具类: public static String httpPostWithjson(String url, String json) throws IOException { ...