案例：滚动条

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. 180608发现的一个有趣的Douyin-Bot项目

    今日发现的github 项目 Douyin-Bot 抖音机器人发现漂亮小姐姐 :sweat_smile: 在开发者模式下,找到指针位置,开启之后,当点击屏幕时,可以获取点击屏幕处的xy坐标了 我使用的 ...

  2. Java虚拟机性能管理神器 - VisualVM（7） 排查JAVA应用程序线程泄漏【转】

    Java虚拟机性能管理神器 - VisualVM(7) 排查JAVA应用程序线程泄漏[转] 标签: javajvm线程泄漏 2015-03-11 19:47 1098人阅读 评论(0) 收藏 举报   ...

  3. CTO职场解惑指南系列（一）

    基于科技能够改变世界的事实,几乎每个公司的程序员都自带闪光灯.程序员的手和普通人的手自然是有区别的,“我们可是用双手改变了世界” .(码农真的是靠双手吃饭,呵呵) 这个世界上但凡靠双手吃饭就会特别不容 ...

  4. 0901NOIP模拟测试赛后总结

    突然想学迪哥列一下分数线搞清楚自己和别人的差距. rank1- 5- 6-分. 差距很大啊.尤其是和某kyh.大家都开玩笑说天皇是个变态.但是事实摆在这儿,同样坐在机房这么长的时间,人家又AK了. 我 ...

  5. LUOGU P4027 [NOI2007]货币兑换 (斜率优化+CDQ分治)

    传送门 解题思路 题目里有两句提示一定要看清楚,要不全买要不全卖,所以dp方程就比较好列,f[i]=max(f[j]*rate[j]*a[i])/(rate[j]*a[j]+b[j])+(f[j]*b ...

  6. js摇一摇事件

    今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少.  发现很有意思.  一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if ...

  7. Windows的进程间通信

    对于任何一个现代的操作系统,进程间通信都是其系统结构的一个重要组成部分.而说到Windows的进程(线程)间通信,那就要看是在什么意义上说了.因为正如"Windows的跨进程操作" ...

  8. js中控制流管理的四种方法

    引自http://es6.ruanyifeng.com/#docs/generator#yield--表达式 1.常用的回调方法 step1(function (value1) { step2(val ...

  9. [Cqoi2015] 编号 【逆向思维，暴力枚举】

    Online Judge:Luogu-P4222 Label:逆向思维,暴力枚举 题目描述 你需要给一批商品编号,其中每个编号都是一个7位16进制数(由0~9, a-f组成).为了防止在人工处理时不小 ...

  10. List --搜索列表

    1,常见的内建函数 . if val in L :  # 是否在列表 . L.index(val) # 找下标 . L.count(val) # 有多少个 . min/max(L ) # 最大最小 . ...