<!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. springboot继承JpaRepository报org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualif

    在SpringBoot项目中使用JPA时总是报注入失败,不能创建继承JpaRepository的类的问题,然后尝试给继承JpaRepository的写个实现类,不出现注入失败的情况,但是过一段时间后继 ...

  2. 20191210-RobotFramework常见问题解决

    附加-问题解决 1.   执行robot用例的时候提示WebDriverException: Message: invalid argument: can't kill an exited proce ...

  3. linux安装go开发环境

    1下载go wget https://studygolang.com/dl/golang/go1.12.7.linux-amd64.tar.gz执行此命令会将go1.12.7.linux-amd64. ...

  4. 【LEETCODE】54、数组分类，简单级别，题目：605、532

    数组类,简单级别完结.... 不容易啊,基本都是靠百度答案.... 希望做过之后后面可以自己复习,自己学会这个解法 package y2019.Algorithm.array; /** * @Proj ...

  5. Android--Facebook Login with LoginButton

    1.Layout文件添加Facebook的LoginBurtton <com.facebook.widget.LoginButton android:id="@+id/authButt ...

  6. golang ---网卡信息

    package main import ( "fmt" "log" "net" "strings" ) type Net ...

  7. mpvue + vant + flyio 小程序项目总结

    vant 的使用 我开始是 npm 导入,然后 import,使用不了. 找了各种方法,最后还是下载文件,然后找到 dist 文件夹,复制到项目里,我是放在 static 文件夹,文件名 dist 重 ...

  8. Linux 系统中如何进入退出 vim 编辑器

    在 Linux 中,vim 编辑器是系统自带的文本编辑器,但要修改某个文本文件,可不是像 Windows 那样操作,更有新手,进入 vi 编辑器后,无法退出以致于强制关机,其实,这个vim(vi)也是 ...

  9. node的启动环境

    在开发的时候开发环境和正式环境用的接口地址是不一样的端口号可能也不一样,这时候就需要区分端口号,具体方法如下: 在package.json文件的scripts中设置启动命令的时候区分开发和正式: &q ...

  10. js实现用户输入日期算出是今年的第几天

    const rs = require("readline-sync"); // 根据用户输入的年月日输出第几天 // 欢迎 console.log("欢迎来到查询系统&q ...