利用JS實現自定義滾動條

時間 2019-11-10
原文原文鏈接
通常默認的滾動條會比較醜，咱們能夠用簡單的js實現自定義滾動條的功能；html
代碼以下：瀏覽器
<!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">據新華社電中航工業、國機集團等8家央企6日在京簽約，在重要項目、科技轉化等相關領域開展重組合做整合，這將成爲央企間產業聯合協做的新典範，也將開啓央企間產業重組合做整合的新階段。
相關合做內容包括：中航工業和國機集團共同發展八萬噸模鍛壓機項目；中航工業將房地產業務所有劃轉保利集團，中核建設和中國一重在高溫氣冷堆主設備製造領域合做，兵器工業、兵器裝備、中國國新對北方公司進行股權重組。
國務院國資委主任肖亞慶在6日參加中央企業產業合做座談會上表示，下一步，國資委政策將加碼推進央企產業重組步伐，經過業務整合、資產重組、股權合做、資產置換、無償劃轉、協議轉讓、戰略聯盟、聯合開發等多途徑，加快央企間產業重組合做整合。
肖亞慶同時清晰地勾勒出國企改革兼併重組「路線圖」：經過產業重組，在突破關鍵技術、掌握核心資源，打造知名品牌等方面，實現產業重組合做「一加一大於二」的效果。肖亞慶同時透露，目前部分央企在牽頭技術創新戰略聯盟、設立創新投資基金、構建創新孵化平臺等方面，取得了重大突破。據統計，央企牽頭國家及地方技術創新聯盟141個，50多家中央企業共發起和參與基金179只，構建面向社會的創新孵化平臺57個，創業創新平臺27個。
「這次集中籤約，意味着央企重組的重心開始向資本、項目、產業板塊等內部要素轉移。」中國企業研究院首席研究員李錦說，將來，央企間產業重組合做整合將被更快地推動，央企內部的各類要素將被再次優化。</p>
</div>

<div id="out">
    <div id="con">據新華社電中航工業、國機集團等8家央企6日在京簽約，在重要項目、科技轉化等相關領域開展重組合做整合，這將成爲央企間產業聯合協做的新典範，也將開啓央企間產業重組合做整合的新階段。
相關合做內容包括：中航工業和國機集團共同發展八萬噸模鍛壓機項目；中航工業將房地產業務所有劃轉保利集團，中核建設和中國一重在高溫氣冷堆主設備製造領域合做，兵器工業、兵器裝備、中國國新對北方公司進行股權重組。
國務院國資委主任肖亞慶在6日參加中央企業產業合做座談會上表示，下一步，國資委政策將加碼推進央企產業重組步伐，經過業務整合、資產重組、股權合做、資產置換、無償劃轉、協議轉讓、戰略聯盟、聯合開發等多途徑，加快央企間產業重組合做整合。
肖亞慶同時清晰地勾勒出國企改革兼併重組「路線圖」：經過產業重組，在突破關鍵技術、掌握核心資源，打造知名品牌等方面，實現產業重組合做「一加一大於二」的效果。肖亞慶同時透露，目前部分央企在牽頭技術創新戰略聯盟、設立創新投資基金、構建創新孵化平臺等方面，取得了重大突破。據統計，央企牽頭國家及地方技術創新聯盟141個，50多家中央企業共發起和參與基金179只，構建面向社會的創新孵化平臺57個，創業創新平臺27個。
「這次集中籤約，意味着央企重組的重心開始向資本、項目、產業板塊等內部要素轉移。」中國企業研究院首席研究員李錦說，將來，央企間產業重組合做整合將被更快地推動，央企內部的各類要素將被再次優化。</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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。