ホームページ >ウェブフロントエンド >jsチュートリアル >jsシミュレートスクロールバー(水平・垂直)_javascriptスキル
jsシミュレートスクロールバー(水平・垂直)_javascriptスキル
- WBOYオリジナル
- 2016-05-16 17:41:351191ブラウズ
JS:
コードをコピー コードは次のとおりです:
(function(win){
var doc = win.document,db = doc.body;
var Mousewheel = 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};
skyScroll.prototype = {
constructor:skyScroll,
//初期化
init:function( opts){
var set = _extend({
target:'contentbox',
dir:'top',
width:500
高さ:300、
コールバック:関数(){}
},opts||{});
var _this = this,mousemoveHandle,mousedownHandle
this.target = _$(set.target); .parent = this.target.parentNode;
this.width = set.width;
this.dir = set.dir;
this.addWarpper(set.dir);
switch(set.dir){
case 'top':
this.addVscroll();
休憩。
case 'left':
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 = parseInt(target.style.left); veHandle = _mousemoveHandle.call(_this,pos,target) );
_addEvent(doc,'mousemove',mousemoveHandle);
_addEvent(doc,'mouseup',function(){_removeEvent(doc,'mousemove',mousemoveHandle)}); 🎜> }; 🎜> if(target == _this.vScrollOuter || target == _this.lScrollOuter){
_mounsedownHandle.call(_this,pos,target) }; 🎜> });
},
//さらに、コンテンツの変更時、出力される相対的な調整に使用される、移動条の高さまたは高さ、および移動範囲を再計算する方法を提供します
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.lScroll)アウター);
},
//删除横向滚動条
delLscroll:function(){
_deleteScroll.call(this,0,this.lScroll,this.lScrollOuter,this.vScroll,this.vScロール外側） ;
}
};
skyScroll.prototype.init.prototype = skyScroll.prototype;
window.skyScroll = skyScroll;
/***************************プライベート機能*********************** **/
function _mousemoveHandle(pos,target){
var _this = this;
return target == this.vScroll ? function(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;
return this.vScroll ? function(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(top dist / _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);
}:function(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(left 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);
ん？ (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(source の var key) target[key] = source[key];
ターゲットを返します。
};
function _createEl(html,parent){
var div = doc.createElement('div');
div.innerHTML = html;
el = div.firstChild;
親 &&parent.appendChild(el);
return el;
};
function _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 = 親 ||ドクター;
els =parent.getElementsByTagName(node);
for(var i=0,len=els.length;i
};
戻ります;
};
function _stopEvent(e){
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
e.preventDefault ? e.preventDefault() :(e.returnValue = false);
};
function _addEvent(el,type,fn){
if(typeof el.addEventListener != '未定義'){
if(type == 'mouseenter'){
el.addEventListener('マウスオーバー',_findElement(fn),false);
}else if(type === 'mouseleave'){
el.addEventListener('mouseout',_findElement(fn),false);
}else{
el.addEventListener(type,fn,false);
}
}else if(typeof el.attachEvent != '未定義'){
el.attachEvent('on' type,fn);
}else{
el['on' type] = fn;
}
};
function _removeEvent(el,type,fn){
if(typeof el.removeEventListener != 'unknown'){
el.removeEventListener(type,fn,false);
}else if(typeof el.detachEvent != '未定義'){
el.detachEvent('on' type,fn);
}else{
el['on' type] = null;
}
};
function _findElement(fn){
return function(e){
varparent = e.popularTarget;
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();
}
};
function _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:
复制代码代码如下:
1111111111111111111111111111 最近の IE は Web の新しいバージョンですが、他のブラウザや低バージョンの IE のさまざまなバグにより、Web 標準のサポートが失われています。虎的ニコラス・C・ザカス 带私は、Web 公開中に IE が演じた煌めきの色を確認し、より多くのユーザーの目で IE を閲覧できることを確認しました。
文
Internet Explorer が大家の人々の骨の髄まで侵入するブラウザになった少し前に、その以前はインターネット全体の新しい推進力でした。これらの機能は、IE 6 で全世界の Web 公開者になる前に IE によって提供されたものです。 通信は行われませんが、IE 4 ～ 6 があるため、有名な Web 公開で使用できるようになります。就曾是事实标准、后来成为了官方标准最终进入了html5规范。人们也许很难相信、对于我们现在认为理所应当的功能中有很大一部分都应该要想到、对于我们现在认为理所应当的功能中有很大一部分都应该要想到、但快速地回顾一下历史可以
DOM
結果として、IE は人間の苦痛を伴うブラウザーであり、那么「文档オブジェクトモデル」(DOM) は人間の苦痛を伴う API です。 DOM は、頻繁で JavaScript に適さないものもありますが、それらも問題ありません。问IE 3 と Netscape 3 では、プログラムがアクセスできるのは、ドキュメント レイヤーの要素、図、およびリンクのみです。 4 さらに変更を加えて、この領域は document.all を介してそのページのすべての要素に展開されます。の ID は、document.all.myDiv または document.all["myDiv"] など、document.all を介してアクセスされます。主な違いは、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 を作成することがいかに面倒であるかを認識していたようで、outerHTML とともにこの便利な方法を私たちに提供してくれました。どちらの方法も非常に有用であることが証明されており、HTML5 [1] で標準化されています。 DOM レベル 3 では、innerText と同様に動作する textContent[2] が導入されているため、プレーン テキストを処理するために付属する API (innerText と externalText) も十分な影響力を持つことが証明されました。
同じ方針で、IE 4 では、ドキュメントに HTML を挿入するさらに別の方法である insertAdjacentHTML() が導入されました。これには時間がかかりましたが、最終的には HTML5 [3] として成文化され、現在ではブラウザーで広くサポートされています。
イベント
当初、JavaScript にはイベント機構がありませんでした。 Netscape と Microsoft は両方とも、さまざまなモデルを試し、考案してきました。 Netscape はイベント キャプチャをもたらしました。その考え方は、イベントが最初にウィンドウに送信され、次にドキュメントに送信され、最終的に予想されるターゲットに到達するまで 1 つずつ送信されるというものです。 Netscape Browser 6 より前のバージョンでは、イベント キャプチャのみがサポートされていました。
Microsoft は逆のアプローチを採用し、イベント バブリングを設計しました。彼らは、イベントは最初に実際のターゲットから開始され、次にドキュメントに至るまでの上位ノードでトリガーされるべきだと考えています。 IE 9 より前のブラウザはイベント バブリングのみをサポートします。公式の DOM イベント仕様は、イベント キャプチャとイベント バブリングの両方を含むように進化しましたが、ほとんどの Web 開発者はイベント バブリングのみを使用し、イベント キャプチャは一部のソリューションや手法で使用される小規模な JavaScript ライブラリにのみ残されています。
イベント バブリングの作成に加えて、Microsoft は最終的に標準化された一連の追加イベントも作成しました。
contextmenu – マウスの 2 番目のボタンを使用して要素がクリックされたときにトリガーされます。 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 に対応するマウスアウトの非バブル バージョン。 IE 5 で導入され、現在は DOM レベル 3 イベント仕様 [6] によって標準化されています。ブラウザのサポートは、mouseenter と同じです。
focusin – フォーカス イベントのバブリング バージョン。ページ上のフォーカス動作をより適切に管理するために使用されます。もともと IE 6 で導入されましたが、現在は DOM レベル 3 イベント仕様の一部になっています[7]。これは現在十分にサポートされていませんが、Firefox はその実装に関するバグを抱えています。
focusout – ページ上のフォーカス動作をより適切に管理するために使用されるブラー イベントのバブリング バージョン。もともと IE 6 で導入されましたが、現在は DOM レベル 3 イベント仕様の一部になっています[8]。 focusin と同様、あまりサポートされていませんが、Firefox はほぼサポートされています。
XML と Ajax
XML は今日、多くの人々の予想どおり Web で広く使用されていますが、XML サポートのリーダーは依然として IE です。これは、クライアント側の XML 解析と JavaScript による XSLT 変換をサポートした最初のブラウザでした。残念ながら、これは ActiveX オブジェクトを通じて XML ドキュメントと XSLT プロセッサを表します。しかし、Mozilla の担当者は、後に DOMParser、XMLSerializer、XSLTProcessor を使用して同様の機能を作成したため、その利点を認識していたようです。そのうちの最初の 2 つは HTML5 [9] の一部になりました。標準ベースの JavaScript XML 処理方法は、IE が提供するバージョンとは大きく異なりますが、間違いなく IE の影響を深く受けています。
クライアント側の XML 処理はすべて、IE の XMLHttpRequest 実装の一部であり、IE 5 で ActiveX オブジェクトの形式で最初に導入されました。そのアイデアは、Web ページ内のサーバーから XML ドキュメントを取得し、JavaScript がこの XML を DOM として処理できるようにすることです。IE のバージョンでは、新しい ActiveXObject("MSXML2.XMLHttp") を使用する必要があります。これにより、バージョン文字列にも依存するため、開発者は最新バージョンをテストして使用するために熱心に取り組む必要があります。再び Firefox が介入し、IE バージョンのインターフェイスとまったく同じ名前で、当時はプライベートだった XMLHttpRequest オブジェクトを作成することで混乱を解消しました。それ以来、他のブラウザが Firefox の実装をコピーし、最終的に IE 7 にも ActiveX の使用を必要としないバージョンが追加されました。もちろん、誰もが JavaScript に興奮した Ajax 革命の原動力は XMLHttpRequest でした。