首页 JavaScript源码正文

JS原生自定义滚动条

  1. 封装js鼠标滚轮事件 addWheel(obj,fn);

function addWheel(obj, fn) {
    if (window.navigator.userAgent.indexOf('firefox') != -1) {
        obj.addEventListener('DOMMouseScroll', _wheel, false);
    } else {
        obj.onmousewheel = _wheel;
    }
    function _wheel(ev) {
        var oEvent = ev || event;
        var down = false;
        if (oEvent.wheelDelta) {
            /*非火狐浏览器
            * oEvent.wheelDelta > 0  向上
            * oEvent.wheelDelta < 0  向下
            */
            down = oEvent.wheelDelta > 0 ? false: true;
        } else {
            /**
            *火狐浏览器
            *ev.detail > 0 向下
            *ev.detail < 0 向上
            **/
            down = oEvent.detail > 0 ? true: false;
        }
        /**
        *回调
        */
        fn && fn(down);
        return false;
    }
}

 2.html代码部分

<div class="box">
        <div class="count" id="count">
            <div class="text" id="txt">
                <p>新华网昆明1月21日电 中共中央总书记、国家主席、中央军委主席习近平近日在云南调研时强调,要全面贯彻党的十八大和十八届三中、四中全会精神,用全面建成小康社会、全面深化改革、全面依法治国、全面从严治党引领各项工作,加快贫困地区、民族地区经济社会发展,为到2020年如期实现全面建成小康社会奋斗目标加紧奋斗。</p>
                <p>新年伊始,万象更新。元月的云南大地,阳光明媚,山川展绿,生机盎然。1月19日至21日,习近平在云南省委书记李纪恒、代省长陈豪陪同下,来到昭通、大理、昆明等地,看望鲁甸地震灾区干部群众,深入企业、工地、乡村考察,就灾后恢复重建和经济社会发展情况进行调研。</p>
                <p>2014年8月3日,云南昭通市鲁甸县发生6.5级地震,对群众生命财产和基础设施造成巨大损失。地震发生后,习近平总书记第一时间作出重要指示,要求全力以赴做好受灾群众安置和灾后恢复重建工作。5个多月过去了,灾区群众生活过得怎么样?恢复重建工作进展得如何?灾区群众还有哪些要求和期盼?总书记十分关心和牵挂。19日一大早,习近平从北京乘坐飞机直接前往昭通,一下飞机,就转乘汽车一路颠簸前往鲁甸县。</p>
                <p>2014年8月3日,云南昭通市鲁甸县发生6.5级地震,对群众生命财产和基础设施造成巨大损失。地震发生后,习近平总书记第一时间作出重要指示,要求全力以赴做好受灾群众安置和灾后恢复重建工作。5个多月过去了,灾区群众生活过得怎么样?恢复重建工作进展得如何?灾区群众还有哪些要求和期盼?总书记十分关心和牵挂。19日一大早,习近平从北京乘坐飞机直接前往昭通,一下飞机,就转乘汽车一路颠簸前往鲁甸县。</p>
                <p>2014年8月3日,云南昭通市鲁甸县发生6.5级地震,对群众生命财产和基础设施造成巨大损失。地震发生后,习近平总书记第一时间作出重要指示,要求全力以赴做好受灾群众安置和灾后恢复重建工作。5个多月过去了,灾区群众生活过得怎么样?恢复重建工作进展得如何?灾区群众还有哪些要求和期盼?总书记十分关心和牵挂。19日一大早,习近平从北京乘坐飞机直接前往昭通,一下飞机,就转乘汽车一路颠簸前往鲁甸县。</p>
                <p>2014年8月3日,云南昭通市鲁甸县发生6.5级地震,对群众生命财产和基础设施造成巨大损失。地震发生后,习近平总书记第一时间作出重要指示,要求全力以赴做好受灾群众安置和灾后恢复重建工作。5个多月过去了,灾区群众生活过得怎么样?恢复重建工作进展得如何?灾区群众还有哪些要求和期盼?总书记十分关心和牵挂。19日一大早,习近平从北京乘坐飞机直接前往昭通,一下飞机,就转乘汽车一路颠簸前往鲁甸县。aaaaaaaaaaaa</p>

            </div>
        </div>
    
        <a href="javascript:;" id="up">↑</a>
        <a href="javascript:;" id="down">↓</a>
        <div id="div1">
            <span id="span1"></span>
        </div>
    </div>
    <style>
    * { margin:0; padding:0; }
    .box { position:relative; width:500px; height:500px; margin:50px auto; }
    #div1 { position:absolute; top:32px; right:0; width:30px; height:434px; border:1px solid #000; }
    #span1 { position:absolute; top:0; left:0; width:100%; height:100px;/**/ background:green; }
    #up, #down { position:absolute; right:0; z-index:1; width:30px; height:30px; line-height:30px; text-align:center; border:1px solid #000; }
    #up { top:0; }
    #down { bottom:0; }
    
    .count { overflow:hidden; position:relative; width:466px; height:498px; border:1px solid red; }
    .text { position:absolute; top:0; left:0; }
    </style>

3.js源码部分

window.onload = function() {
    // 算高度
    var oCont = document.getElementById('count');
    var oTxt = document.getElementById('txt');
    var oDiv = document.getElementById('div1');
    var oSpan = document.getElementById('span1');
    var a1 = oCont.offsetHeight;
    var b1 = oTxt.offsetHeight;
    var b2 = oDiv.offsetHeight;
    var a2 = a1 / b1 * b2;
    if (a2 > b2) {
        a2 = b2;
    } else if (a2 < 100) {
        a2 = 100;
    }
    oSpan.style.height = a2 + 'px';
    var nMaxTop = oDiv.offsetHeight - oSpan.offsetHeight;
    // 拖拽
    oSpan.onmousedown = function(ev) {
        var oEvent = ev || event;
        var disY = oEvent.clientY - oSpan.offsetTop;
        document.onmousemove = function(ev) {
            var oEvent = ev || event;
            var top = oEvent.clientY - disY;
            set(top);
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
    // 上下
    var oDown = document.getElementById('down');
    oDown.onclick = function() {
        var top = oSpan.offsetTop + 20;
        set(top);
    };

    var oUp = document.getElementById('up');
    oUp.onclick = function() {
        var top = oSpan.offsetTop - 20;

        set(top);
    };
    function set(top) {
        if (top < 0) {
            top = 0;
        } else if (top > nMaxTop) {
            top = nMaxTop;
        }
        var a = Math.floor(top / nMaxTop * (oTxt.offsetHeight - oCont.offsetHeight));
        oSpan.style.top = top + 'px';
        oTxt.style.top = -a + 'px';
    }
    addWheel(oTxt,
    function(down) {
        if (down) {
            var top = oSpan.offsetTop + 10;
        } else {
            var top = oSpan.offsetTop - 10;
        }
        set(top);
    });
};


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论