案例：滚动条

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. 记录openSUSE 源码安装node.js

    openSUSE版本: 42.2 目标:安装好 Node.js v6.10.3 在终端中可以使用 "su" 命令,切换到root用户. 1. 安装 gcc,gcc-c++ zypp ...

  2. 2016.8.17上午纪中初中部NOIP普及组比赛

    2016.8.17上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1335 本来觉得自己能考高分,但只得160分,并列第九.至少又挤 ...

  3. 从微服务治理的角度看RSocket、. Envoy和. Istio

    很多同学看到这个题目,一定会提这样的问题:RSocket是个协议,Envoy是一个 proxy,Istio是service mesh control plane + data plane. 这三种技术 ...

  4. csps-s模拟测试60嘟嘟噜，天才绅士少女助手克里斯蒂娜，凤凰院凶真题解

    题面:https://www.cnblogs.com/Juve/articles/11625190.html 嘟嘟噜: 约瑟夫问题 第一种递归的容易re,但复杂度较有保证 第二种适用与n大于m的情况 ...

  5. ConcurrentHashMap 和 Hashtable 的区别

    ConcurrentHashMap 和 Hashtable 的区别主要体现在实现线程安全的方式上不同. 1.底层的数据结构: ConcurrentHashMap 在jdk1.7之前采用的是 分段的数组 ...

  6. 原生ajax封装及用法

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

  7. VS2010-MFC（利用MFC向导生成单文档应用程序框架）

    一.VC++与MFC 讲VC++免不了要提MFC,MFC全称Microsoft Foundation Classes,也就是微软基础类库.它是VC++的核心,是C++与Windows API的结合,很 ...

  8. 安装sklearn的一点事故解决

    安装sklearn过程出现挺多问题的.这里记录下一下问题点避免下次走弯路 1.安装ANACONDA,避免太多插件的手动安装,选用版本Anaconda3-4.3.1-Windows-x86_64.rar ...

  9. leetcode 238 & leetcode 152 & leetcode 228

    lc238 Product of Array Except Self 遍历两次数组 用一个res[] 记录答案 1) 第一次,从左往右遍历 res[i] 记录0~i-1的乘积 2) 第二次,从右往左遍 ...

  10. Python开发第三方必备工具

      <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style=&quo ...