<!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 模拟滚动条的更多相关文章

  1. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  2. js模拟滚动条滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  4. 自动化测试基础篇--Selenium中JS处理滚动条

    摘自https://www.cnblogs.com/sanzangTst/p/7692285.html 前言 什么是JS? JS就是JavaScript: JavaScript 是世界上最流行的脚本语 ...

  5. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...

  6. vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

    基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...

  7. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  8. javascript动画系列第五篇——模拟滚动条

    × 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...

  9. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

随机推荐

  1. jmeter如何解决乱码问题

    使用jmeter的时候时常遇到中文乱码的情况,下面总结一下几个解决方法,方便以后进行复习. 1.添加后置处理器Beanshell PostProcessor,在输入框内写入“prve.setDateE ...

  2. python循环删除list中的元素

    直接上例子: a = [1,2,3,4,5,6] for i in a: a.remove(i) print(a) 返回:[2, 4, 6] 循环a,想删除a的所有元素,但实际确有数据保留了下来,这是 ...

  3. Python自动化之数据驱动（转载下自己的日常练习笔记）

    一.execl数据驱动 1.xlutils简要说明 导包:pip3 install xlutils 注意⚠️:xlutils在介些Execl文件的时候,只识别.xls后缀的文件,如果是.xlsx后缀的 ...

  4. 微信小游戏排行榜页滚动查看排行榜（canvas指定区域溢出滚动，懒渲染）

    在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

  5. IT男频繁猝死背后的心理探秘

    "深圳36岁IT男猝死酒店马桶上"这条新闻再次成为人们眼球的焦点,每每发生这样的事情,难免让人扼腕唏嘘,他们本该是风华正茂的年纪,家有老母贤妻爱子,甚至房子车子票子都不缺,该是一边 ...

  6. Ruby爬虫header发送cookie，nokogiri解析html数据

    之前用php写过一个爬虫,同样是获取局域网的网站数据,这次我使用相同的网络环境,更低的电脑配置,使用ruby来再次爬虫,惊人的发现ruby使用自带的类库net/http爬取速度要远远超过php的cur ...

  7. Dykin's blog

    回归分析是一种很重要的预测建模技术.主要是研究自变量与因变量之间的因果关系.本文将会从数学角度与代码角度分析不同类型的回归.当你想预测连续型的非独立变量,或者对一系列独立变量或输入项有所反应时,就会使 ...

  8. Daily Practice 2016-09-20

    算法 回文(Palindrome)数字:判断一个数字是不是回文数字,不能使用另外的空间. 提示: 负数可以是回文数字吗? 如果转为字符串需要新分配空间 你也许想到了反转数字,但反转数字可能溢出,怎样处 ...

  9. Geohash介绍

    Geohash介绍 Geohash是一种地址编码,能把二维的经纬度编码成字符串,某一区域范围内的经纬度是一致的,其中有编码长度控制区域的范围 精度参考 使用场景 实时LBS应用 LBS应用中,搜索某某 ...

  10. Android入门（创建、编译、运行、打包、安装）

    一.创建Android项目 1.选择Emtpy Activity=>Next 2.配置项目 输入Name(名称) Package.name(包名) Save location(保存位置) Lan ...