<!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. try中定义的变量在finally中找不到

    凡是代码块中的变量,作用域都只在代码块中 https://blog.csdn.net/qq_20936333/article/details/81062966 问题: 解决:

  2. freeRadius日志关闭

    vim /etc/raddb/radiusd.conf #file = ${logdir}/radius.log file = /dev/null vim /etc/raddb/modules/det ...

  3. MAYA卸载/完美解决安装失败/如何彻底卸载清除干净MAYA各种残留注册表和文件的方法

    在卸载MAYA重装MAYA时发现安装失败,提示是已安装或安装失败.这是因为上一次卸载后没有清理干净,系统会误认为已经安装过了.有的同学是新装的系统也会出现安装失败的情况,这是因为C++ 或者.NET的 ...

  4. Java IO: RandomAccessFile

    原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) RandomAccessFile允许你来回读写文件,也可以替换文件中的某些部分.FileIn ...

  5. 吴裕雄--天生自然HTML学习笔记：HTML 样式- CSS

    CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. <!DOCTYPE html> <html> <head> <me ...

  6. 关于（Building tool）的认识以及当下流行的Building tool有哪些？

    1.Building tool是什么? (Building tool)构建工具是一种工具,它负责构建流程的所有内容,并自动化与构建项目相关的所有内容.它致力于以下任务: 生成源代码(如果在软件项目中使 ...

  7. file / from install of XXX conflicts with file from package filesystem-XXX

    在centos上安装一个偏门软件时出现如下问题: rpm -ivh mNetAssist-0.1.1-2.x86_64.rpm #执行命令 file / from install of XXX con ...

  8. LeetCode 刷题记录（1-5题）

    1 两数之和(题目链接) class Solution: # 一次哈希法 def twoSum(self, nums, target): """ :type nums: ...

  9. 每天一个linux命令（15）-tail

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不断刷新, ...

  10. LISTAGG函数

    官网进入 该函数作用是可以实现对列值得拼接: 根据官网介绍,可以对列值排序进行拼接,也可以分组拼接 1.1运行结果 1.2运行结果 2运行结果 注意该函数提供的 over( partition by ...