<!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. [转帖]在 k8s 中通过 Ingress 配置域名访问

    在 k8s 中通过 Ingress 配置域名访问 https://juejin.im/post/5db8da4b6fb9a0204520b310 在上篇文章中我们已经使用 k8s 部署了第一个应用,此 ...

  2. flask框架（八）—自定义命令flask-script、多app应用、wtforms表单验证、SQLAIchemy

    自定义命令flask-script 用于实现类似于django中 python3 manage.py runserver ...类似的命令,用命令行启动项目 首先安装:pip3 install fla ...

  3. 解决SQL server 18740、18456登录失败问题

    第一步:使用window管理员用户登录SQL server 第二步:如下图步骤(开始配置sa默认用户) 第三步:选择角色类型 第四步:选择和配置用户映射的数据库 第五步:授予允许连接,并开启登录权限 ...

  4. 启迪链网通证经济共同体：柏链教育&火聘online推出区块链行业人才“一门式”服务

    近日,启迪链网通证经济共同体旗下两个节点成员柏链教育与火聘online,达成节点间的合作,据悉本次合作是采用共同体的生态共建模式,柏链教育与火聘online共享企业端岗位需求的大数据,然后有针对性的开 ...

  5. 使用 Angular RouteReuseStrategy 缓存（路由）组件

    使用 Angular RouteReuseStrategy 缓存组件 Cache components with Angular RouteReuseStrategy RouteReuseStrate ...

  6. Luogu4705 玩游戏 分治FFT

    传送门 \(\begin{align*} Ans_k &= \sum\limits_{i=1}^n\sum\limits_{j=1}^m (a_i + b_j)^k \\ &= \su ...

  7. redis持久化机制和内存管理

    redis持久化方式有两种:RDB方式和AOF方式 1.RDB方式:内存快照,在指定的时间间隔对数据进行快照存储,支持在客户端直接BGSAVE或者SAVE命令来创建一个内存快照,BGSAVE会fork ...

  8. Python之TensorFlow的基本介绍-1

    一.TensorFlow™是一个基于数据流编程(dataflow programming)的符号数学系统,被广泛应用于各类机器学习(machine learning)算法的编程实现,其前身是谷歌的神经 ...

  9. 试用一款网荐的 iOS 快速布局UI库

      NerdyUI github: https://github.com/nerdycat/NerdyUI Cupcake (Swift 版本) github: https://github.com/ ...

  10. Ruby开发小记

    基础点 1.log打印 puts "Hello!" 2.拼接字符 value1 = "today" value2 = "#{value1} is Th ...