js 스크롤 막대 시뮬레이션(가로 및 세로)_javascript 기술

JS:

코드 복사 코드는 다음과 같습니다.

(function(win){
    var doc = win.document,db = doc.body;
    var mousewheel = 문서의 'onmousewheel' ? 'mousewheel' : 'DOMMouseScroll';
    var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};
    skyScroll.prototype = {
        constructor:skyScroll,
        //初始化
        init:function( opts){
            var set = _extend({
               대상:'contentbox',
               dir:'top',
               너비:500,
             높이:300,
                콜백:함수 (){}
            },opts||{});
           var _this = this,mousemoveHandle,mousedownHandle;
            this.target =
           this.parent = this.target.parentNode;
            this.width = set.width;
           this.height = set.height;
          this.dir = set.dir;
            this.addWarpper(set.dir);
            스위치(set.dir){
               케이스 'top':
                  this.addVscroll();
                    휴식;
                사례 '왼쪽':
                   this.addLscroll();
                    휴식;
               기본값 :
                   this.addVscroll();
                   this.addLscroll();
            };
            _addEvent(doc,'mousedown',function(e){
               var e = e || window.event,target = e.target || e.srcElement,pos= _getMousePos(e);
if(target == _this.vScroll || target == _this.lScroll){
                   pos.tTop =parseInt(_this.target.style.top)
                  pos.tLeft = parseInt(_this.target.style .left);
                  pos.sTop =parseInt(target.style.top);
                pos.sLeft(target.style.left)
                  mousemoveHandle = _mousemoveHandle.call(_this,pos,target );
                   _addEvent(doc,'mousemove',mousemoveHandle)
                 _addEvent(doc,'mouseup',function(){_removeEvent(doc,'mousemove',mousemoveHandle)}); 🎜>               };
            });
        },  
        //외부 확장이 새로운 방식으로 향상되었습니다.应的调整
        recalculated:function(){
var H = this.target.offsetHeight,W = this.target.offsetWidth,T =parseInt(this.target.style.top),L =parseInt(this.target.style.left),h,w;
            this.ratio = {l:this.width / W,v:this.height / H};
            this.range = {l:W-this.width, t: H - this.height};
            if(this.vScroll){
               h = Math.round(Math.pow(this.height,2) / H);
                this.vScroll.style.height = h 'px';
                this.vScroll.style.top = Math.round(this.height * (-T/H)) 'px';
                this.range.st = this.height - h;
                this.wrapper.style.height = this.height 'px';
            };
            if(this.lScroll){
               w = Math.round(Math.pow(this.width,2) / W)
               this.lScroll.style.width = w 'px';
                this.lScroll.style.left = Math.round(this.width * (-L/W)) 'px';
                this.range.sl = this.width - w;
                this.wrapper.style.width = this.width 'px';
            };
        },
        //对外提供设置滚动条的位置的方法
        set:function(pos){
            if(!_isObject(pos)) throw new Error('参数类型错误，参数必须是object!');
            if(pos.top && !isNaN(parseInt(pos.top)) && this.vScroll){
                var top = Math.min(pos.top,this.range.t);
                this.target.style.top = -top + 'px';
                this.vScroll.style.top = Math.round(this.height * (top / this.target.offsetHeight)) + 'px';
            };
            if(pos.left && !isNaN(parseInt(pos.left)) && this.lScroll){
                var left = Math.min(pos.left,this.range.l);
                this.target.style.left = -left + 'px';
                this.lScroll.style.left = Math.round(this.width * (left / this.target.offsetWidth)) + 'px';
            };
        },
        addWarpper:function(dir){
            if(this.wrapper) return;
            var _this = this,W = this.target.offsetWidth,H = this.target.offsetHeight,mousewheelHandle;
            this.wrapper = _createEl('

',this.parent);
            this.wrapper.appendChild(this.target);
            this.target.style.cssText = 'position:absolute;top:0;left:0';
            switch(dir){
                case 'top':
                    this.wrapper.style.height = this.height + 'px';
                    this.wrapper.style.width = W + 'px';
                    break;
                case 'left':
                    this.wrapper.style.height = H + 'px';
                    this.wrapper.style.width = this.width + 'px';
                    break;
                default :
                    this.wrapper.style.width = this.width + 'px';
                    this.wrapper.style.height = this.height + 'px';
            };
            _addEvent(this.wrapper,'mouseenter',function(e){
                var pos = {};
                pos.tTop = parseInt(_this.target.style.top);
                pos.tLeft = parseInt(_this.target.style.left);
                if(_this.vScroll) pos.sTop = parseInt(_this.vScroll.style.top);
                if(_this.lScroll) pos.sLeft = parseInt(_this.lScroll.style.left);
                mousewheelHandle = _mousewheelHandle.call(_this,pos);
                _addEvent(_this.wrapper,'mousewheel',mousewheelHandle);
                _addEvent(_this.wrapper,'mouseleave',function(){_removeEvent(_this.wrapper,'mousewheel',mousewheelHandle)});
            });
        },
        //对外提供添加竖向滚动条的方法
        addVscroll:function(){
            if(this.vScroll) return;
            !this.wrapper && this.addWarpper('top');
            this.vScrollOuter = _createEl('

',this.wrapper)
            this.vScroll = _createEl('

',this.wrapper);
            this.recalculated();
        },
        //对外提供添加横向滚动条的方法
        addLscroll:function(){
            if(this.lScroll) return;
            !this.wrapper && this.addWarpper('left');
            this.lScrollOuter = _createEl('

',this.wrapper)
            this.lScroll = _createEl('

',this.wrapper);
            this.recalculated();
        },
        //删除竖向滚动条
        delVscroll:function(){
            _deleteScroll.call(this,1,this.vScroll,this.vScrollOuter,this.lScroll ,this.lScrollOuter );
        },
        //删除横向滚动条   
        delLscroll:function(){
           _deleteScroll.call(this,0,this.lScroll,this.lScrollOuter,this. vScroll,this.vScrollOuter) ;
        }
    };
    skyScroll.prototype.init.prototype = skyScroll.prototype;
    window.skyScroll = skyScroll;
    /****************************개인 기능**************************** **/
    function _mousemoveHandle(pos,target){
        var _this = this;
        반환 대상 == this.vScroll ? 함수(e){
            e = e || 창.이벤트;
            var newPos = _getMousePos(e);
            _this.target.style.top = Math.min(0,Math.max(pos.tTop (pos.y - newPos.y)/_this.ratio.v,-_this.range.t)) 'px ';
            target.style.top = Math.max(0,Math.min(pos.sTop - pos.y newPos.y,_this.range.st)) 'px';
            _this.callback.call(_this);
            _cancelSelect()
        }:function(e){
            e = e || 창.이벤트;
            var newPos = _getMousePos(e);
            _this.target.style.left = Math.min(0,Math.max(pos.tLeft (pos.x - newPos.x)/_this.ratio.l,-_this.range.l)) 'px ';
            target.style.left = Math.max(0,Math.min(pos.sLeft - pos.x newPos.x,_this.range.sl)) 'px';
            _this.callback.call(_this);
            _cancelSelect();
        }
    };

    function _mousewheelHandle(pos){
        var _this = this;
        this.vScroll을 반환 하시겠습니까? 함수(e){
            e = e || 창.이벤트;
            _stopEvent(e);
            var data = e.wheelDelta ? e.wheelDelta /120 : -e.detail/3;
            var top =parseInt(_this.target.style.top);
            var sTop =parseInt(_this.vScroll.style.top);
            var dist = 데이터 * 5;
            _this.target.style.top = Math.min(0,Math.max(상단 거리 / _this.ratio.v, -_this.range.t)) 'px';
            _this.vScroll.style.top = Math.max(0,Math.min(sTop-dist,_this.range.st)) 'px';
            _this.callback.call(_this);
        }:기능(e){
            e = e || 창.이벤트;
            _stopEvent(e);
            var data = e.wheelDelta ? e.wheelDelta /120 : -e.detail/3;
            var left =parseInt(_this.target.style.left);
            var sLeft =parseInt(_this.lScroll.style.left);
            var dist = 데이터 * 5;
            _this.target.style.left = Math.min(0,Math.max(왼쪽 dist / _this.ratio.l, -_this.range.l)) 'px';
            _this.lScroll.style.left = Math.max(0,Math.min(sLeft-dist,_this.range.sl)) 'px';
            _this.callback.call(_this);
        }
    };
    function _mounsedownHandle(pos,target){
        var _this = this;
        var elPos = _getElementPosition(target);
        if(target == this.vScrollOuter){
            console.log(pos.y - elPos.y);
            _this.set({
                top:pos.y - elPos.y
            });
        }else{
            _this.set({
               left:pos.x - elPos.x
           });
        };
    };
    function _deleteScroll(n,s1,s11,s2,s22){
        var o = n ? '높이' : '너비' ,s = n ? '상단' : '왼쪽';
        if(!s1) return;
        this.wrapper.removeChild(s1);
        this.wrapper.removeChild(s11);
        n ?  (this.vScroll = null) : (this.lScroll = null);
        if(!s2){
            this.wrapper.parentNode.appendChild(this.target);
            this.wrapper.parentNode.removeChild(this.wrapper);
            this.target.style.cssText = '';
            this.wrapper = null;
        }else{
            this.wrapper.style[o.toLowerCase()] = this.target['offset' o] 'px';
            this.recalculated();
        };
        this.target.style[s] = '0px';
        //this.target.style[o.toLowerCase()]= 'auto';
    };
    /***************************도구 기능************************ **/
    function _$(id){
        return typeof id === 'string' ? doc.getElementById(id) : id;
    };
    function _extend(target,source){
        for(var key in source) target[key] = source[key];
        반품 대상;
    };
    function _createEl(html,parent){
        var div = doc.createElement('div');
        div.innerHTML = html;
        el = div.firstChild;
        부모 && parent.appendChild(el);
        return el;
    };
    함수 _getMousePos(e){
        if(e.pageX || e.pageY) return {x:e.pageX,y:e.pageY};
        return {
            x:e.clientX document.documentElement.scrollLeft - document.body.clientLeft,
            y:e.clientY document.documentElement.scrollTop - document.body.clientTop
        };
    };
    function _isObject(o){
        return o === Object(o);
    };
    function _getElByClass(node,oClass,parent){
        var re = [],els,parent = parent || 의사;
        els = parent.getElementsByTagName(노드);
        for(var i=0,len=els.length;i            if((' ' els[i].className ' ').indexOf(' ' oClass ' ') > ; -1) re.push(els[i]);
        };
        답장을 보내주세요.
    };
    function _stopEvent(e){
        e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
        e.preventDefault ? e.preventDefault() :(e.returnValue = false);
    };
    함수 _addEvent(el,type,fn){
        if(typeof el.addEventListener != 'undefine'){
            if(type == 'mouseenter'){
               el.addEventListener(' mouseover',_findElement(fn),false);
            }else if(type === 'mouseleave'){
               el.addEventListener('mouseout',_findElement(fn),false);
            }else{
               el.addEventListener(type,fn,false);
            }
        }else if(typeof el.attachEvent != 'undefine'){
            el.attachEvent('on' type,fn);
        }else{
            el['on' type] = fn;
        }
    };
    function _removeEvent(el,type,fn){
        if(typeof el.removeEventListener != 'undefine'){
            el.removeEventListener(type,fn,false);
        }else if(typeof el.detachEvent != 'undefine'){
            el.detachEvent('on' type,fn);
        }else{
            el['on' type] = null;
        }
    };
    function _findElement(fn){
        return function(e){
            var parent = e.관련Target;
            while(parent && parent != this) parent = parent.parentNode;
            if(parent != this) fn.call(this,e);
        }
    };
    function _cancelSelect(){
        if (window.getSelection) {
            if (window.getSelection().empty) {  // Chrome
              window.getSelection().empty();
            } else if (window.getSelection().removeAllRanges) {  // Firefox
               window.getSelection().removeAllRanges();
            }
        }else if (document.selection) {  // IE?
          document.selection.empty();
        }
    };
    함수 _getElementPosition(el){
        var x = 0,y=0;
        if(el.getBoundingClientRect){
            var pos = el.getBoundingClientRect();
            var d_root = document.documentElement,db = document.body;
            x = pos.left Math.max(d_root.scrollLeft,db.scrollLeft) - d_root.clientLeft;
            y = pos.top Math.max(d_root.scrollTop,db.scrollTop) - d_root.clientTop;
        }else{
            while(el != db){
                x = el.offsetLeft;
                y = el.offsetTop;
                el = el.offsetParent;
            };
        };
        return {
            x:x,
            y:y
        };
    };
})(창);

HTML:

复主代码 代码如下:

   
    제목>
   


   
   
   
   
   
   
   
   

译文

Internet Explorer에서 成为大家恨之入骨的浏览器的很久以前，它曾是整个互联网的创新驱动力。时候我们很难记得IE 6은 IE 所发者의 灾难 지 이전에 IE 所发者의 灾难 지에서 작동합니다.些独특별한 功能过去就曾是事实标准，后来成为了官方标准最终进入了 HTML5 规范.功能中有很大一聯分所应该要想到 IE，但快速地回顾一下历史可以让我们知道的确如此.

DOM

如 果 IE 是一个人人道痛恨的浏览器，那么「文档对象模型」(DOM)就是人人道痛恨 API는 了입니다.你可以说 DOM 过于繁琐、不适保 JavaScript 甚至是有些荒谬，而且这些也道没错。然而，DOM 还是给了开发者过 JavaScript 来访问网页의 每个부분은 途径입니다. IE 3과 Netscape 3는 모두 Netscape 3과 함께 사용됩니다. Netscape 4는 Netscape 4와 호환됩니다.范围通过 document.layers 扩 확장 到了它特유적 레이어 元素。IE 4 작업은 document.all 扩 확장 到了页면이 所有改进, 把这个范围通过 .

더 많은 방면에서 document.all 算是 document.getElementById() 적最初版本。你还是要使사용원素귀하의 ID는 document.all 访问它,例如 document.all.myDiv 或是 document.all["myDiv"]입니다.주요 차이점은 IE가 메서드 대신 컬렉션을 사용한다는 점인데, 이는 당시 document.images 및 document.forms와 같은 다른 액세스 방법과 일치합니다.

IE 4는 document.all.tags()를 사용하여 태그 이름별로 요소 목록을 얻는 기능을 처음으로 도입했습니다. 모든 의도와 목적을 위해 이것은 document.getElementsByTagName()의 원본 버전이며 정확히 동일하게 작동합니다. 모든 div 요소를 얻으려면 document.all.tags("div")를 사용할 수 있습니다. IE 9에서도 이 메소드는 document.getElementsByTagName()의 별칭으로 여전히 존재합니다.

또한 IE 4에서는 역대 가장 인기 있는 비공개 DOM 확장인 innerHTML을 소개했습니다. Microsoft 사람들은 DOM을 프로그래밍 방식으로 생성하는 것이 얼마나 고통스러운 일인지 깨닫고 이 편리한 방법을 externalHTML과 함께 우리에게 제공한 것 같습니다. 두 방법 모두 매우 유용한 것으로 입증되었으며 HTML5 [1]에서 표준화되었습니다. 일반 텍스트를 처리하기 위해 함께 제공되는 API(innerText 및 externalText)도 DOM 레벨 3에서 innerText와 유사하게 동작하는 textContent[2]를 도입했기 때문에 충분히 영향력이 있는 것으로 입증되었습니다.

같은 맥락에서 IE 4에서는 문서에 HTML을 삽입하는 또 다른 방법인 insertAdjacentHTML()을 도입했습니다. 시간이 좀 더 걸렸지만 결국 HTML5[3]으로 코드화되었으며 현재 브라우저에서 널리 지원됩니다.

이벤트

처음에는 JavaScript에 이벤트 메커니즘이 없었습니다. Netscape와 Microsoft는 서로 다른 모델을 시도하고 생각해냈습니다. Netscape는 이벤트 캡처를 제공했는데, 아이디어는 이벤트가 먼저 창으로 전송된 다음 문서로 전송된 다음 최종적으로 예상 대상에 도달할 때까지 하나씩 차례로 전송된다는 것입니다. Netscape Browser 6 이전 버전은 이벤트 캡처만 지원했습니다.

Microsoft는 정반대의 접근 방식을 취하여 이벤트 버블링을 설계했습니다. 그들은 이벤트가 실제 대상에서 먼저 시작된 다음 상위 노드에서 문서까지 트리거되어야 한다고 믿습니다. IE 9 이전의 브라우저는 이벤트 버블링만 지원합니다. 공식 DOM 이벤트 사양이 이벤트 캡처와 이벤트 버블링을 모두 포함하도록 발전했지만 대부분의 웹 개발자는 이벤트 버블링만 사용하므로 이벤트 캡처는 일부 솔루션과 기술에 사용되는 작은 JavaScript 라이브러리에만 남아 있습니다.

이벤트 버블링을 만드는 것 외에도 Microsoft는 최종적으로 표준화된 일련의 추가 이벤트도 만들었습니다.

contextmenu – 보조 마우스 버튼을 사용하여 요소를 클릭하면 트리거됩니다. IE 5에 처음 등장했고 나중에 HTML5[4]로 코드화되었습니다. 이제 모든 주요 브라우저에서 지원됩니다.
beforeunload – 언로드 이벤트 전에 실행되어 페이지 종료를 차단할 수 있습니다. 원래 IE 4에 도입되었지만 이제는 HTML5[4]에도 포함되어 있습니다.
mousewheel – 마우스 휠(또는 유사한 장치)을 사용할 때 실행됩니다. 이 이벤트를 지원하는 첫 번째 브라우저는 IE 6이었습니다. 다른 것과 마찬가지로 현재 HTML5[4]의 일부입니다. 이 이벤트를 지원하지 않는 유일한 주요 데스크톱 브라우저는 Firefox입니다(그러나 대신 사용할 수 있는 DOMMouseScroll 이벤트는 지원합니다).
mouseenter – 마우스 오버로 인해 발생하는 문제를 극복하기 위해 Microsoft가 IE 5에서 도입한 버블 없는 버전의 마우스 오버입니다. 이 이벤트는 DOM 레벨 3 이벤트 사양[5]에 의해 공식화되었습니다. Firefox 및 Opera에서도 지원되지만 Safari 및 Chrome에서는 (아직?) 지원되지 않습니다.
mouseleave – mouseenter에 해당하는 mouseout의 버블 없는 버전입니다. IE 5에서 도입되었으며 현재 DOM 레벨 3 이벤트 사양[6]에 의해 표준화되었습니다. 브라우저 지원은 mouseenter와 동일합니다.
focusin – 페이지의 포커스 동작을 더 잘 관리하는 데 사용되는 포커스 이벤트의 버블링 버전입니다. 원래 IE 6에 도입되었지만 이제는 DOM 레벨 3 이벤트 사양[7]의 일부입니다. Firefox는 구현과 관련된 버그를 공개했지만 현재는 잘 지원되지 않습니다.
focusout – 페이지의 포커스 동작을 더 잘 관리하는 데 사용되는 블러 이벤트의 버블링 버전입니다. 원래 IE 6에 도입되었지만 이제는 DOM 레벨 3 이벤트 사양[8]의 일부입니다. focusin과 마찬가지로 잘 지원되지는 않지만 Firefox가 가깝습니다.
XML과 Ajax
XML은 많은 사람들이 예상한 것처럼 오늘날 웹에서 널리 사용되지만 XML 지원 분야의 선두주자는 여전히 IE입니다. JavaScript를 통해 클라이언트 측 XML 구문 분석 및 XSLT 변환을 지원하는 최초의 브라우저였습니다. 불행하게도 이는 ActiveX 개체를 통해 XML 문서와 XSLT 프로세서를 나타냅니다. 그러나 Mozilla 사람들은 나중에 DOMParser, XMLSerializer 및 XSLTProcessor를 사용하여 유사한 기능을 만들었기 때문에 분명히 그 장점을 인식했습니다. 그 중 처음 두 개는 HTML5[9]의 일부가 되었습니다. 표준 기반 JavaScript XML 처리 방법은 IE에서 제공하는 버전과 상당히 다르지만 의심할 여지없이 IE의 영향을 많이 받습니다.

클라이언트 측 XML 처리는 모두 IE 5에서 ActiveX 개체 형식으로 처음 도입된 XMLHttpRequest 구현의 일부입니다. 아이디어는 웹 페이지의 서버에서 XML 문서를 가져오고 JavaScript가 이 XML을 DOM으로 처리할 수 있도록 하는 것입니다.IE 버전에서는 새로운 ActiveXObject("MSXML2.XMLHttp")를 사용해야 하며, 이는 또한 버전 문자열에 종속되게 만들고 개발자가 최신 버전을 테스트하고 사용하기 위해 열심히 노력해야 합니다. 다시 한 번 Firefox가 개입하여 인터페이스의 IE 버전과 정확히 동일한 이름을 가진 당시 개인용 XMLHttpRequest 객체를 생성하여 혼란을 정리했습니다. 그 이후로 다른 브라우저들이 Firefox의 구현을 복사했고 결국 IE 7에도 ActiveX 사용이 필요하지 않은 버전이 추가되었습니다. 물론 모든 사람들이 JavaScript에 열광하게 만든 Ajax 혁명의 원동력은 XMLHttpRequest였습니다.

var a = skyScroll({
     target:'scrollTest'
   });
   var add = document.getElementById('add');
   var scrollTest = document.getElementById('scrollTest' );
var setTop = document.getElementById('setTop');
var setLeft = document.getElementById('setLeft')
var addSt = document.getElementById('addSt')
var addSl = document.getElementById('addSl');
var delSt = document.getElementById('delSt');
var delSl = document.getElementById('delSl')
var delSt = document.getElementById( 'delSt') {
var w = scrollTest.offsetWidth;
scrollTest.innerHTML =
a.recalculated()

setT op.onclick = 함수 (){
a.set({top:200}); = function(){
        a.addVscroll(); delSt.onclick = function(){
         a.delVscroll(); ;