<!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. ubuntu18.04LTS服务器用vituralenv安装和配置pytorch和tensorflow

    ============tensorflow================= $ python3 -m venv tf14====输入例子====# $ vim ~/.bashrc #(添加如下行, ...

  2. Prometheus入门到放弃(3)之Grafana展示监控数据

    grafana我们这里采用docker方式部署 1.下载镜像 镜像官网地址:https://hub.docker.com/r/grafana/grafana/tags [root@prometheus ...

  3. git 学习笔记 ---安装

    Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 安装Git 在Linux上安装Git 首先,你可以试着输入git,看看系统有没有安装Git: $ git The progr ...

  4. [高清·非影印] Docker 容器与容器云（第2版）

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

  5. dicker第三章--网络管理

  6. docker第一章--介绍和安装

  7. Qt Table Widget常用操作

    一.鼠标悬浮在item上 显示提示信息 1.在构造函数开启table Widget控件的鼠标捕获功能 // 开启鼠标捕获功能(实现table widget的悬浮功能) ui.tableWidget-& ...

  8. 社交类app开发（ 仿陌陌 客户端+服务器端）

    一.开发所需要的技术 手机端需要Android/iOS开发人员,服务器端需要php/数据库开发人员, 如果再做网页版的话,WEB开发也是要的. 即时通讯 GPS地图 群聊 差不多 对 http  so ...

  9. 设置yum自动更新

    [wang@brady ~]$ sudo yum -y install cronie yum-cron sudo vim /etc/yum/yum-cron.conf apply_updates = ...

  10. Python——元组

    是为了满足,某些值当被定义以后就不可修改或删除而出现的元组形式. 特点: 元组中的元素不可被修改或删除 没有独立的功能 可以进行嵌套,当嵌套方可以修改删除时,可以对嵌套方进行. 元组可以进行公共功能中 ...