<!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. deeplearning.ai 序列模型 Week 3 Sequence models & Attention mechanism

    1. 基础模型 A. Sequence to sequence model:机器翻译.语音识别.(1. Sutskever et. al., 2014. Sequence to sequence le ...

  2. 百度AI技术

    利用百度提供接口,实现智能语音 语音合成 -- TTS(text to speech) 注册 在 ai.baidu.com 页面中点击 控制台 ,弹出登陆 / 注册页面 创建应用 登陆成功后,点击左侧 ...

  3. verilog的function使用

    语法: function [range] function_id;    input_declaration    other_declarations    procedural_statement ...

  4. MOOC（7）- case依赖、读取json配置文件进行多个接口请求-测试类中调用封装的mock（10）

    封装mock后,在单元测试中调用 # -*- coding: utf-8 -*- # @Time : 2020/2/11 8:35 # @File : test_class_10.py.py # @A ...

  5. 多线程并发 了解 Thread

    通过上一篇 多线程并发 (一) 了解 Java 虚拟机 - JVM 了解了java 虚拟机的构成以及对象的创建等.从Java虚拟机栈我们知道每当我们创建一个线程JVM就会给我们的线程分配一个私有的内存 ...

  6. Nginx笔记总结二十:nginx索引目录配置

    location / { autoindex on; autoindex_localtime on; }

  7. 吴裕雄--天生自然KITTEN编程：小猫解题

    作品链接:https://ide.codemao.cn/we/36447034

  8. python 面向对象静态方法、类方法、属性方法、类的特殊成员方法

    静态方法:只是名义上归类管理,实际上在静态方法里访问不了类或实例中的任何属性. 在类中方法定义前添加@staticmethod,该方法就与类中的其他(属性,方法)没有关系,不能通过实例化类调用方法使用 ...

  9. spring-boot-学习笔记（三）-过滤器

      过滤器有两种配置方式,一种是通过注解来完成,一种是通过自定义配置类来设置 这里假设的场景是,定义一个过滤器,过滤所有请求,如果参数中没有username信息则重定向到login_page登录页面, ...

  10. 我们一起学React Native(一)：环境配置

    最近想在项目中实现跨平台,对比一下主流的实现方式,选用了React Native.参考网上的教程,对于一直都是原生移动端开发,对前端的知识不是很了解的,感觉入门不是特别简单.于是打算把学习React ...