案例：滚动条

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. TmodJs：常用语法

    ylbtech-TmodJs:常用语法 1.返回顶部 1.循环 {{each items as item index}} <tr> <td>{{index+1}}</td ...

  2. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  3. v-bind:class

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. Linux 静态IP配置

    静态配置文件# vim /etc/sysconfig/network-scripts/ifcfg-不同系统不一样主要几个配置TYPE=EthernetBOOTPROTO=static/noneNAME ...

  5. java基础之完数判断

    完数: 完全数(Perfect number),又称完美数或完备数,是一些特殊的自然数.它所有的真因子(即除了自身以外的约数)的和(即因子函数),恰好等于它本身.如果一个数恰好等于它的因子之和,则称该 ...

  6. vue:解决使用param传参后，再次刷新页面会新增一个原有的tab

    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...

  7. Linux常用命令的缩写含义

    命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户rpm:redhat package manager 红帽子打包管 ...

  8. [计蒜之道2019 复赛 A]外教 Michale 变身大熊猫

    [计蒜之道2019 复赛 A]外教 Michale 变身大熊猫 Online Judge:2019计蒜之道 复赛 A Label:LIS+线段树.树状数组+快速幂(模逆元) 题目描述 题解: pre. ...

  9. 单例模式以及在C#中的使用

    下面做一些简要的说明. 1. 单例模式(Singleton Pattern),又称作单件模式,当然也有一种诙谐的称谓:单身模式.在经典的GoF所著的<Design Patterns>一书中 ...

  10. hdu1527

    hdu1527两堆博弈模型,威佐夫博弈 #include<iostream> #include<cstdio> #include<queue> #include&l ...