js 模拟滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    #div1{width:30px;height:500px;background:#000;position:absolute;}

    #div2{width:30px;height:100px;background:red;position:absolute;left:0;top:0;display:none;}

    #content1{width:500px;height:500px;border:1px solid #063;position:absolute;left:44px; overflow:hidden;}

    #content2{position:absolute;}

</style>

<script>

    window.onload = function(){

        var oDiv1 = document.getElementById('div1');

        var oDiv2 = document.getElementById('div2');

        var oDiv3 = document.getElementById('content1');

        var oDiv4 = document.getElementById('content2');

        var contentHeight = oDiv3.clientHeight-oDiv4.offsetHeight;

        if(contentHeight >= 0){

            //直接返回

            return false;

        }

        //溢出，显示滚动条

        var scrolRatio = oDiv3.clientHeight/oDiv4.offsetHeight;

        var scrolHeight = scrolRatio*100;

        oDiv2.style.height = scrolHeight+'px';

        oDiv2.style.display = 'block';

        var maxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;

        oDiv2.onmousedown = function(ev){

            var ev = ev || event;

            var disY = ev.clientY-this.offsetTop;/*鼠标点击到元素的距离*/

            document.onmousemove = function(ev){

                var ev = ev || event;

                var T = ev.clientY-disY;/*元素移动的距离*/

                if(T < 0){

                    T = 0;

                }else if(T > maxTop){

                    T = maxTop;

                }

                oDiv2.style.top = T+'px';

                var iScale = T/maxTop;

                oDiv4.style.top = contentHeight*iScale+'px';

            };

            document.onmouseup =  function(){

                document.onmousemove = document.onmouseup = null;

            };

            return false;

        };

    };

</script>

</head>

<body>

<div id='div1'>

    <div id='div2'>

    </div>

</div>

<div id='content1'>

    <div id='content2'>

     yy1<br /> yyl<br /> yy2<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy3<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy100<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy200<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy400<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br />     yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy500<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy900<br />

    </div>

</div>

</body>

</html>

js 模拟滚动条的更多相关文章

JS模拟滚动条(有demo和源码下载,支持拖动滚轮点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
js模拟滚动条滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS模拟下拉框select
最近做的一个项目有下拉框同事都是用的是美化控件,但是用美化控件当然是好但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
自动化测试基础篇--Selenium中JS处理滚动条
摘自https://www.cnblogs.com/sanzangTst/p/7692285.html 前言什么是JS? JS就是JavaScript: JavaScript 是世界上最流行的脚本语 ...
JS-特效～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
js模拟抛出球运动
js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...
javascript动画系列第五篇——模拟滚动条
× 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动前面的话当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...
Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

随机推荐

java实现银行管理系统
Bank类 package First; import java.util.TreeSet; //银行类public class Bank { private String Bankna ...
AUTODESK 卸载工具，完美彻底卸载清除干净autodesk各种软件残留注册表和文件
小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢?AUTODESK系列软件着实令人头疼,CAD/3dmax/maya/Revit/Inven ...
3DMAX 卸载工具，完美彻底卸载清除干净3dmax各种残留注册表和文件
一些同学安装3dmax出错了,也有时候想重新安装3dmax的时候会出现这种本电脑windows系统已安装3dmax,你要是不留意直接安装,只会安装3dmax的附件,3dmax是不会安装上的.这种原因呢 ...
c++ 如何清除上一次的输出?
#include <iostream.h>#include <stdlib.h>int main(){cout<<"PBY PBY PBY PBY PBY ...
《JavaScript算法》二分查找的思路与代码实现
二分查找的思路首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步. 如果目标元素大于或者小于中间元素,则在数组大于或小于中间元素的那一半 ...
win7 任务栏无法固定文件夹和文件解决方法
2010年开始使用win7,一直都在用一个功能,把常用的文件夹和文件都直接锁定到任务栏,方便使用. 最近这个功能一直有问题,开始只是重启以后,以前固定的文件没有了,这个也懒的去弄它,没了在添加一次. ...
SVN图标含义说明
最经都在用Svn,对他上面的很多状态图标不是很理解,看了看它的帮助文档,说的很清楚,特地截张图. Svn不同状态图标及说明 - 简单 - 简单 Normal A fresh checked ...
Ⅱ：python入门
一.编程语言介绍编程语言的分类: 机器语言汇编语言高级语言(编译型.解释型号) 总结: 执行效率:机器语言>汇编语言>高级语言(编译型>解释型) 开发效率:机器语言<汇编 ...
Appium自动化测试实践
安装配置Appium环境安装appium 安装appium有两种方式,一种是通过命令行终端方式,一种是Appium Desktop.这里推荐使用Appium Desktop方式,只需下载下来安装就可 ...

js 模拟滚动条

js 模拟滚动条的更多相关文章

随机推荐

热门专题