<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<meta name="keywords" content="">

<meta name="description" content="">

<style>

    *{margin:0; padding:0; list-style:none;}

    body{

        height:2000px;

    }

    .box1{

        width: 320px;

        height: 400px;

        background: #ccc;

        overflow: hidden;

        overflow-y: scroll;

        margin: 20px 0 0 100px;

    }

    .con1{

        font-size: 18px;

    }

    #out{

        width: 320px;

        height: 400px;

        background: url(bg1.png) 0 0 repeat-x;

        position: absolute;

        left: 500px;

        top: 20px;

        overflow: hidden;

    }

    #con{

        width: 280px;

        padding: 5px;

        font-size: 18px;

        position: absolute;

        left: 0px;

        top: 0px;

    }

    #box{

        width: 30px;

        height: 400px;

        position: absolute;

        right: 0;

        top: 0;

    }

    #drag{

        width: 30px;

        height: 53px;

        background: url(icon2.png) 0 0 no-repeat;

        position: absolute;

        left: 0px;

        top: 0px;

    }

</style>

</head>

<body>

<div class="box1">

    <p class="con1">模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条</p>

</div>

<div id="out">

    <div id="con">

        模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条

    </div>

    <div id="box">

        <p id="drag"></p>

    </div>

</div>

<script>

    var out=document.getElementById('out');

    var con=document.getElementById('con');

    var box=document.getElementById('box');

    var drag=document.getElementById('drag');

    drag.onmousedown=function (ev){

        var e=ev||window.event;

        if (e.preventDefault) {

            e.preventDefault();

        } else{

            e.returnValue=false;

        };

        var d_bkt=e.clientY-drag.offsetTop;

        document.onmousemove=function (ev){

            var e=ev||window.event;

            var top=e.clientY-d_bkt;

            if (top<=0) {

                top=0;

            };

            if (top>=box.clientHeight-drag.clientHeight) {

                top=box.clientHeight-drag.clientHeight;

            };

            var scale=top/(box.clientHeight-drag.clientHeight);

            var cony=scale*(con.clientHeight-out.clientHeight);

            drag.style.top=top+'px';

            con.style.top=-cony+'px';

            console.log(top);

        }

        document.onmouseup=function (){

            document.onmousemove=null;

        }

    }

    var str=window.navigator.userAgent.toLowerCase();

    if (str.indexOf('firefox')!=-1) {//火狐浏览器

        out.addEventListener('DOMMouseScroll',function (e){

            e.preventDefault();//阻止窗口默认的滚动事件

        if (e.detail<0) {

            var t=con.offsetTop+20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        if (e.detail>0) {

            var t=con.offsetTop-20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        },false);

    } else{//非火狐浏览器

        out.onmousewheel=function (ev){

            var e=ev||window.event;

            if (e.preventDefault) {

                e.preventDefault();

            } else{

                e.returnValue=false;

            };

            if (e.wheelDelta>0) {

            var t=con.offsetTop+20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        if (e.wheelDelta<0) {

            var t=con.offsetTop-20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        }

    };

</script>

</body>

</html>

终极效果图

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

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

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

  2. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  3. js禁止滚动条滚动，并且滚动条不消失，页面大小不变

    //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...

  4. js 模拟滚动条

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

  5. js将滚动条滚动到指定位置的方法

    代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  6. JS模拟下拉框select

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

  7. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  8. js 判断滚动条是否停止滚动

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

  9. js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...

随机推荐

  1. Active Objects模式

    实现的思路是,通过代理将方法的调用转变为向阻塞队列中添加一个请求,由一个线程取出请求后执行实际的方法,然后将结果设置到Future中 这里用到了代理模式,Future模式 /************* ...

  2. Windows 下删除 Docker 容器的方法

    Issue: 删除命令执行失败 如果在 CMD 命令提示符下删除容器可能失败,可切换至 PowerShell 中执行成功. unknown shorthand flag: 'a' in -a See ...

  3. gitlab升级备份

    一.备份有关备份和恢复的操作,详见我的另一篇博客:Gitlab的备份与恢复在开始升级之前,一定要做好备份工作,并记录好版本号.1.查看当前Gitlab的版本号 [root@gitlab ~]# cat ...

  4. python三大器之装饰器的练习

    装饰器 加载顺序从下至上 执行顺序从上至下 ''' 多层装饰器 ''' def deco1(func): #func=deco2 def wrapper1(*args, **kwargs): '''t ...

  5. Django总结篇

    1.0 简述http协议和常用请求头 http协议: ( 基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)) HTTP协议是Hyper Text Transfer Pro ...

  6. gorm 处理时间戳

    问题 在使用 gorm 的过程中, 处理时间戳字段时遇到问题.写时间戳到数据库时无法写入. 通过查阅资料最终问题得以解决,特此总结 设置数据库的 dsn parseTime = "True& ...

  7. Spring MVC前端控制器不拦截静态资源配置

  8. [高清] JavaEE开发的颠覆者 Spring Boot实战 完整版

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  9. RabbitMQ实战-死信队列

    RabbitMQ死信队列 场景说明 代码实现 简单的Util 生产者 消费者 场景说明 场景: 当队列的消息未正常被消费时,如何解决? 消息被拒绝并且不再重新投递 消息超过有效期 队列超载 方案: 未 ...

  10. String字符串创建方法

    String字符串的创建方法我们总结为3+1,3是一共有3种构造方法,1是有一种特殊的创建方法. 首先来看3种构造方法: 1.new String()  无参构造 用该方法创建的字符串是一个空字符串, ...