案例：滚动条

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. Android开发 GradientDrawable详解

    前言 GradientDrawable类似与Xml布局里的shape,常用在一些自己封装的对话框控件的背景或者其他View中,优势是不需要你在带着xml布局文件一起封包.. 画线 GradientDr ...

  2. Datagrip2019本地激活

    一.下载:  https://www.jetbrains.com/zh/datagrip/     下载2019版本的(当前2019.1.2版本) 二.使用方法 1. 先下载压缩包解压后得到jetbr ...

  3. ROC曲线及AUC

    ROC曲线 意义 ROC曲线指受试者工作特征曲线 / 接收器操作特性曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,是用 ...

  4. Android基础控件ListView和自定义BaseAdapter适配器

    1.简介 ListView用于列表显示,相当于OC中的TableView,和适配器一块使用,相关属性: footerDividersEnabled:是否在footerView(表尾)前绘制一个分隔条, ...

  5. PAT甲级——A1008 Elevator

    The highest building in our city has only one elevator. A request list is made up with N positive nu ...

  6. Python学习day43-数据库(多表关系)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  7. Python学习day02 - 编程分类和Pycharm和Jupyter的安装

    编程语言分类 编程语言是用来和计算机交互的,计算机只认识0和1 机器语言(低级语言) 直接和硬件交互 用0和1和计算机沟通 优点:执行效率最高 缺点:开发效率低 汇编语言直接和硬件交互 优点(相较于机 ...

  8. 给java mongodb 官方driver 增加bean 操作

      mongodb官方的java driver不支持直接插入java bean,只能使用DbObject的Key,Value形式进行insert,update,(c# mongodb官方driver类 ...

  9. Anaconda如何配置多版本Python

    https://blog.csdn.net/guanmaoning/article/details/80031279

  10. Ubuntu时间管理方法

    1. date 命令主要用于显示以及修改系统时间 2. hwclock 命令用于查看设置硬件时间,以及同步硬件时间与系统时间 # 显示硬件时间hwclock # 设置硬件时间hwclock -set ...