PCモバイルターミナルは、IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+慣性アシスト、スライディングリバウンドと互換性があります
ファサードモード
コードコピーは次のとおりです。
window.onload = function（）{
/*テストデータ*/
var insert = '';
for（var i = 0; i <80; i ++）{
INSERT + = '<div style = "width：100％; text-align：center;">スライドテスト' + i + '</div>';
}
document.getElementById（ "movearea"）。innerhtml = insert;
/*テストデータ*/
var at = new AppTouch（{
tcontain： 'Apparea'、//必須：スライディングエリアID
Tmove： 'Movearea'、//必須：領域IDを移動します
Tscroller： 'Scroller'、//必須：カスタムスクロールバー
Tscrolleraea：「Screollerarea」//必須：スクロールバーエリア
}、onmoveend）;
//上部/下のコールバックへ
function onmoveend（m）{
//console.log(m）;
}
}
/*=============================================================================== ==============================================================================
*名前：AppTouch
*機能：Webアプリスライドシミュレーションコンポーネント
*パラメーター：関連する構成
==========================*/
var apptouch = function（config、callback）{
this.touchcontain = config.tcontain;
this.touchmove = config.tmove;
this.touchscroller = config.tscroller;
this.touchscrollerArea = config.tscrollerArea;
this.callbackfn = callback;
this.move（）;
}
apptouch.prototype = {
移動：function（e）{
var monitor = document.getElementById（this.touchcontain）、//聴取したコンテナ
ターゲット= document.getElementById（this.touchmove）、//ターゲットを移動します
screoller = document.getElementById（this.touchscroller）、//カスタムスクロールバー
ScreollerArea = document.getElementById（this.touchscrollerarea）、//スクロラー領域
sheight = monitor.offseetheight /target.offsetheigh * monitor.offseTheigh、// scrollbarの長さをカスタマイズする
st =（target.offseTheight -monitor.offsetheight） /（monitor.offsetheight -sheight）、//ローラーの単位長に対応する移動ブロック
tslow = 4、//上/下のマイナスベースへ
tmove = 0、//スライダーから最高値
tmovel = tmove + 140、//ドロップダウン範囲はトップになります
bmove = monitor.offseTheight -target.offseTheigh、//スライダーの最高値
bmovel = bmove -140、//絶対にアップスライディング範囲
callbackfn = this.callbackfn、// callback function
flg = false、//マーカーがスライドしているかどうか
Starty、//開始位置をマークします
starttop、//スライドの開始時に高さの値をマークします
移動= 0;
//移動距離
//マウスイベント登録
AddEvent（Monitor、 'Mousedown'、Movestart）;
AddEvent（Monitor、 'mousemove'、movein）;
AddEvent（Monitor、 'MouseUp'、MoveEnd）;
AddEvent（window、 'mousemove'、movein）;
addevent（window、 'mouseup'、moveend）;
//モバイルデバイスタッチイベント登録
AddEvent（Monitor、 'TouchStart'、Movestart）;
AddEvent（Monitor、 'touchmove'、movein）;
AddEvent（Monitor、 'Touchend'、MoveEnd）;
/**
*外観/運賃モードパッケージ
*/
/*イベントリスニング*/
関数addEvent（el、type、fn）{
if（el.addeventlistener）{
El.AddeventListener（Type、FN、False）;
} else if（el.attachevent）{
el.Attachevent（ 'on' + type、fn）;
} それ以外 {
el ['on' + type] = fn;
}
}
//ブラウザのデフォルト動作をキャンセルします
関数stop（e）{
// Opera/Chrome/ff
if（e.preventdefault）
E.PreventDefault（）;
// IE
e.ReturnValue = false;
}
//パッケージは終了します
/**
*操作機能
*/
//慣性緩和パラメーター
var lastmovetime = 0;
var lastmovestart = 0;
var stopinertiamove = false;
/*モバイルトリガー*/
関数movestart（e）{
停止（e）;
flg = true;
if（e.touches）
E = E.Touches [0];
starty = e.clienty;
starttop = target.style.top || 0;
//慣性遅い
lastmovestart = starty;
lastMovetime = new date（）。getTime（）;
stopinertiamove = true;
ScreollerArea.style.visibility = 'visible';
}
/*移動中*/
関数movein（e）{
if（flg）{
停止（e）;
if（e.touches）
E = E.Touches [0];
move = e.clienty -starty + parseint（starttop）;
if（move> tmove）{
（move -tmove） / tslow + tmove> tmovel？移動= tmovel：move =（move -tmove） / tslow + tmove
} else if（move <bmove）
（move -bmove） / tslow + bmove <bmovel？ move = bmovel：move =（move -bmove） / tslow + bmove;
Target.style.top = move + 'px';
screoller.style.top = -move / st + 'px';
//慣性遅い
var nowtime = new date（）。getTime（）;
stopinertiamove = true;
if（nowtime -lastmovetime> 300）{
lastmovetime = nowtime;
lastmovestart = e.clienty;
}
}
}
/*終了を移動*/
関数ムーブエンド（e）{
停止（e）;
if（e.touches）
E = E.Touches [0];
//慣性遅い
var contentStop = target.style.top.replace（ 'px'、 ''）;
var centerny =（parseint（contenttop） + e.clienty -lastmovestart）;
var nowtime = new date（）。getTime（）;
var v =（e.clienty -lastmovestart） /（nowtime -lastmovetime）;
//指は最後の期間に削減しています
stopinertiamove = false;
（function（v、starttime、contenty）{
var dir = v> 0？ -1：1;
//加速方向
var決定= dir * 0.005;
関数inertiamove（）{
if（stopinertiamove）
戻る;
var nowtime = new date（）。getTime（）;
var t = nowtime -starttime;
var nowv = v + t *減速;
var movey =（v + nowv）/ 2 * t;
//速度方向の変更は、速度が0に達したことを意味します
if（dir * nowv> 0）{
if（move> tmove）{
callbackfn（ 'top'）;
Target.style.top = tmove + 'px';
screoller.style.top = tmove + 'px';
} else if（move <bmove）{
callbackfn（ 'then it'）;
Target.style.top = bmove + 'px';
screoller.style.top = -bmove / st + 'px';
}
setimeout（function（）{
if（！stopinertiamove）
ScreollerArea.style.visibility = 'hidden';
}、4000）;
戻る;
}
move = contenty + movey;
if（move> tmove）{
t /= 20;
move =（move -tmove） / 10 + tmove;
} else if（move <bmove）{
t /= 20;
move =（move -bmove） / 10 + bmove;
}
Target.style.top = move + "px";
screoller.style.top = -move / st + 'px';
Settimeout（Inertiamove、10）;
}
inertiamove（）;
}）（v、nowtime、contenty）;
移動= 0;
flg = false;
}
//操作が終了します
/**
*関連する初期化
*/
//バーの長さの初期化をスクロールします
screoller.style.height = sheight + 'px';
//初期化は終了します
}、
その他のinteract：function（）{
//他の機能が拡張されます
}
}
つまり、CSSをハックします
コードコピーは次のとおりです。
ボディ、html {background-color：＃333;マージン：0;高さ：100％;ラインハイト：2.0;フォントファミリー：「Microsoft Yahei」; Overflow-y：hidden;}
#contain {margin：0 auto;位置：相対;幅：100％;最大幅：480px; _width：480px;高さ：100％;カーソル：ポインター！重要;}
#apparea {position：absolute;幅：100％;高さ：100％;オーバーフロー：隠し;バックグラウンドカラー：#fff;}
#topinfo {position：absolute; top：60px; width：100％;高さ：60px;テキストアライグ：センター;フォントサイズ：18px; }
#bottominfo {position：absolute; bottom：0; width：100％;}
#scrollerarea {position：absolute;右：0;幅：1.5％;高さ：100％;可視性：非表示;}
#scroller {position：absolute;上：0;幅：100％;バックグラウンドカラー：#aaa;}
#movearea {position：absolute;上：0px;幅：100％;バックグラウンドカラー：#ddd;}
HTMLコード
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Meta name = "Viewport" content = "width = device-width、initial-scale = 1.0、user-scalable = no">
<link type = "text/css" href = "css/main.css" rel = "styleSheet">
<title>スライドリバウンド</title>
<！ - [if lt ie 9]> <！[endif] - >
<noscript> </noscript>
</head>
<body>
<div id = "cantable">
<div id = "Apparea">
<div id = "topinfo">
ロゴまたはアニメーション
</div>
<div id = "bottominfo">
いくつかのImformation 2014-4-28
</div>
<div id = "movearea"> </div>
<div id = "ScreollerArea">
<div id = "scroller"> </div>
</div>
</div>
</div>
<スクリプトsrc = "js/main.js"> </script>
</body>
</html>