古いルールは- DEMOで、最初の楽しみを持っている：縦スクロール画像（しかし、あなたは〜の電話でそれを参照してくださいする必要があり、このデモを）
次にソース：垂直スクロールの写真
DEMOは左側と現在の垂直表示画像インデックス上の画像の数があり、非常に簡単で、その後、全体がスライド可能な縦方向にタッチリストは、スライド可能なコールバック関数をカスタマイズすることができます。
A.私はの原則についてお話しましょう
まず、絵は確かの垂直方向の配置です
この絵のように以下のように
灰色のボックスには、長手方向に整列した画像の山であります
レッドボックスは表示領域、隠されたオーバーフローです
DIVは、次に動的〜の異なるブロックの表示画像を切り替えるボックス上部の内部の値を変更します
II。コードコード
まず、初期化コンテナーの高さ、及び長手方向の制御棒を添加しました
LONG_DISTANCE = nelsonVS.minHeight / 2;
for(var i = 0 ; i < nelsonVS.lis.length ; i++){
nelsonVS.lis[i].style.height = nelsonVS.minHeight + "px";
}
nelsonVS.ul.style.height = nelsonVS.num * nelsonVS.minHeight + "px";
var prograssBarDom = document.createElement("ul");
prograssBarDom.className = "prograssBar";
var fragment = document.createDocumentFragment();
for(var i = 0,linode = "" ; i < nelsonVS.num ; i ++){
linode = document.createElement("li");
linode.className = "prograssBarItem" + (i==0?" active":"");
fragment.appendChild(linode);
}
prograssBarDom.appendChild(fragment);
nelsonVS.dom.appendChild(prograssBarDom);
nelsonVS.prograssBar = prograssBarDom.children;
prograssBarDom = null;fragment = null;
this.slide();
return this;
}
その後、結合事象をスクロール
バインディングtouchstartの記録開始位置は、指で触れます
リアルタイム更新指touchmove結合位置が画面の点、及び指スクロールと容器の画像に触れます
前/次の画像に絵巻、またはスクロールをホーミングするようにされていない時の位置から指を更新touchend結合、および裁判官の位置に応じて（トリガしきい値設定可能）
var STARTY,ENDY,EVENT_TYPE,START_POS,that = this,TIMESTAMP,TIMESTAMP_END;
nelsonVS.dom.addEventListener("touchstart",function(e){
e.preventDefault();
TIMESTAMP = (new Date()).valueOf();
START_POS = nelsonVS.ul.offsetTop;
STARTY = e.touches[0].clientY;
if(that.moveInterval){
clearInterval(that.moveInterval);
}
})
nelsonVS.dom.addEventListener("touchmove",function(e){
e.preventDefault();
ENDY = e.targetTouches[0].clientY;
nelsonVS.ul.style.top = START_POS + ENDY - STARTY + "px";
})
nelsonVS.dom.addEventListener("touchend",function(e){
e.preventDefault();
TIMESTAMP_END = (new Date()).valueOf();
var DIS = ENDY - STARTY;
if(DIS > DISTANCE){
EVENT_TYPE = "DOWN";
}else if(DIS < -DISTANCE){
EVENT_TYPE = "UP";
}
if(Math.abs(DIS) > DISTANCE){
if(TIMESTAMP_END - TIMESTAMP < SENSIBILITY){
that.checkAction(EVENT_TYPE);
}else{
if(Math.abs(DIS) > LONG_DISTANCE){
that.checkAction(EVENT_TYPE);
}else{
that.action(EVENT_TYPE);
}
}
}else{
that.action();
}
})
スライド方向と閾値決意を検出します
if((et == "UP" && (nelsonVS.index - 1) <= -nelsonVS.num) || (et == "DOWN" && (nelsonVS.index + 1) > 0)){
this.action();
return;
}
switch(et){
case 'UP':
nelsonVS.isSliding = true;
nelsonVS.index--;
this.action(et);
break;
case 'DOWN':
nelsonVS.index++;
nelsonVS.isSliding = true;
this.action(et);
break;
default:
this.action();
}
}
スクロール処理
var AIM_POS = nelsonVS.minHeight * nelsonVS.index;
var DIS = AIM_POS - nelsonVS.ul.offsetTop; var speed = (DIS) / 3;
var that = this;
that.moveInterval = setInterval(function(){
nelsonVS.ul.style.top = nelsonVS.ul.offsetTop + speed + "px";
if(Math.abs(AIM_POS - nelsonVS.ul.offsetTop) < speed || Math.abs(speed) <= 0.5){
nelsonVS.ul.style.top = AIM_POS + "px";
speed = (DIS) / 3;
if(et){
var para = {};
para.index = -nelsonVS.index;
para.item = nelsonVS.lis[para.index];
if(that.onSlideCallBack){
that.onSlideCallBack(para);
if(that.onSlideUpCallBack||that.onSlideDownCallBack){
console.error("在设置滚动回调的时候不可同时设置单向滚动回调")
}
}else{
if(that.onSlideUpCallBack && et == "UP"){
that.onSlideUpCallBack(para);
}
if(that.onSlideDownCallBack && et == "DOWN"){
that.onSlideDownCallBack(para);
}
}
}
that.changePrograssBar();
clearInterval(that.moveInterval);
nelsonVS.isSliding = false;
}else{
speed = (AIM_POS - nelsonVS.ul.offsetTop) / 5;
}
},10)
現在のインデックス値にコントロールバーの位置を更新します
for(var i = 0 ; i < nelsonVS.prograssBar.length ; i++){
if(nelsonVS.prograssBar[i].classList.contains("active")){
nelsonVS.prograssBar[i].classList.remove("active");
break;
}
}
nelsonVS.prograssBar[-nelsonVS.index].classList.add("active");
他は〜そのいくつかのコールバックの友人であります