JavaScriptカスタムスクロールバー

5320 ワード

げんせいjs webフロントエンド js。スクロールバー

ブラウザが持っているスクロールバーのスタイルは比較的に単一で、下は元のjsを利用して実現したスクロールバーで、自分の好きなスタイルに変えられます.
htmlコード:





    
    
    
    Document
    
    
        window.onload = function () {
            var scroll = document.getElementById('scroll');
            var sBox = document.getElementById('scrollBox');
            var box = document.getElementById('box');
            var content = document.getElementById('content');
            //       
            var cHight = content.offsetHeight - box.offsetHeight;//      
            var sHight = sBox.offsetHeight - scroll.offsetHeight;//    
            //    
            var scale = cHight / sHight;
            //      
            darg(scroll, content, scale);
            box.onmousewheel = function (ev) {
                var ev = window.event || ev;
                if (ev.wheelDelta == -120) {
                    if (parseInt(content.style.top) <= -cHight) {
                        content.style.top =-cHight+ 'px';
                        scroll.style.top =sHight+ 'px';
                    } else {
                        content.style.top = content.offsetTop -5  + 'px';
                        scroll.style.top = scroll.offsetTop + (5/ scale) + 'px';
                    }
                }else{
                    if (parseInt(content.style.top) >= 0) {
                        content.style.top =0+ 'px';
                        scroll.style.top =0+ 'px';
                    } else {
                        scroll.style.top = scroll.offsetTop - (5/ scale) + 'px';
                        content.style.top = content.offsetTop +5+ 'px';
                    }
                }
            }

        }
    



    
        
                （JacksonYee，2000 11 28 -），      ，        、  、  ，TFBOYS    。 2013 8 6 ，  TFBOYS      ；2016   16                      、       ，2016          
               。2017 ，         。2018 8 ，                  。12 4 ，     MAHB           。     （JacksonYee，2000 11 28 -），      ，
                   、  、  ，TFBOYS    。 2013 8 6 ，  TFBOYS      ；2016   16                      、       ，2016              。2017 ，         。2018 8 ，      
                       。12 4 ，     MAHB           。     （JacksonYee，2000 11 28 -），      ，        、  、  ，TFBOYS    。 2013 8 6 ，
             TFBOYS      ；2016   16                      、       ，2016              。2017 ，         。2018 8 ，                  。12 4 ，     MAHB           。

ドラゴ.js:
(jsファイルはもともとパッケージされていますので、がく、にできます.)

function darg(obj,content,scale) {
    //      
    obj.onmousedown = function (ev) {
        var ev = window.event || ev;
        //                  
        var cW = obj.parentNode.offsetWidth;
        var cH = obj.parentNode.offsetHeight;
        //       
        var bW = obj.offsetWidth;
        var bH = obj.offsetHeight;
        //         
        var disX = ev.clientX - obj.offsetLeft;
        var disY = ev.clientY - obj.offsetTop;
        //      
        document.onmousemove = function (ev) {
            var ev = window.event || ev;
            //         
            var x = ev.clientX - disX;
            var y = ev.clientY - disY;
            content.style.top=-y*scale+'px';
            //        ，         
            if (x < 0) {
                obj.style.left = '0px';
                //cW-bW    obj left         ，              
            } else if (x > cW - bW) {
                obj.style.left = cW - bW + 'px';
            } else {
                obj.style.left = x + 'px';
            }
            if (y < 0) {
                obj.style.top = '0px';
                content.style.top='0px';
                //top left      
            } else if (y > cH - bH) {
                content.style.top=-(cH - bH)*scale+'px';
                obj.style.top = cH - bH + 'px';
            } else {
                obj.style.top = y + 'px';
            }
            return false;
        }
        //      
        document.onmouseup = function () {
            //      ，       
            document.onmousemove = document.onmouseup = null;
        }
    }
}