码迷,mamicode.com
首页 > Web开发 > 详细

js自定义滚动条

时间:2020-05-31 16:29:46      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:org   meta   turn   如何   padding   bsp   his   eve   新规   

<!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" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>自定义滚动条</title>
    <style>
        #parent{width:600px;height:20px;background: #ccc;position: relative;margin: 0 auto;}     
   #div1{width:20px;height:20px;background: red;position: absolute;left: 0;top: 0;}
   #div2{width:400px;height:300px;border:1px solid black;overflow: hidden;position: relative;}
#div3{position: absolute;left: 0;top: 0;padding: 4px;}
    </style>
    
    <script>
        window.onload=function(){
            var oDiv=document.getElementById(div1);
            var oDiv2=document.getElementById(div2);
            var oDiv3=document.getElementById(div3);
            var oParent=document.getElementById(parent);

            var disX=0;

            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                document.onmousemove=function (ev){
                    var oEvent=ev||event;
                    var left=oEvent.clientX-disX;
                    var right=oParent.offsetWidth-oDiv.offsetWidth;

                    if(left<0){
                        left=0;
                    }else if(left>right){
                        left=right;
                    }

                    oDiv.style.left=left+px;

                    var scale=left/right;
                    document.title=scale;

                    oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+px;
                };

                document.onmouseup=function (ev){
                    this.onmousemove=null;
                    this.onmouseup=null;

                };
                
                return false;//chrome,ff,IE9
            };

        }
    </script>
    </head>

    <body>
    <div id="parent">
        <div id="div1"></div>
    </div>
    <div id="div2">
        <div id="div3">
            四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制vv

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制四月起,这些新规将影响你我生活

2020-03-31

2020年4月起

我国一批新规将正式实施

一起来看看如何影响你我生活

证监会:自4月1日起

取消证券公司外资股比限制
        </div>
    </div>
    </body>
    </html>

 

js自定义滚动条

标签:org   meta   turn   如何   padding   bsp   his   eve   新规   

原文地址:https://www.cnblogs.com/sunnywindycloudy/p/13018803.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!