効果：
アイデア：
まず、スクロール バーを制御するために onscroll をロードします。次に、モーションをバッファリングする方法を記述します。モーションをバッファリングする方法は、まず DIV バッファーの速度を計算し、それを切り上げてから、モーションを実行して終了点に到達するタイミングを決定します。最後にパラメータを返します。次に、オンスクロールでこのメソッドを呼び出し、エンドポイントを計算してこのメソッドのパラメータに割り当てます。
コード：
次のようにコードをコピーします。
<head runat="サーバー">
<タイトル></タイトル>
<style type="text/css">
#div1
{
幅: 200ピクセル;
高さ: 200ピクセル;
背景: #0000FF;
位置: 絶対;
右: 0;
下: 0;
}
</スタイル>
<script type="text/javascript">
window.onscroll = function () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || 移動高さを取得します。
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //パラメータを呼び出します。内部のパラメータは DIV のエンドポイントです。つまり、(視覚的な高さ - DIV の高さ) / 2 + モバイルの高さ
};
var タイマー = null;
関数 move(end) {
clearInterval(timer); //まず、以前に開いた setInterval を閉じます。
タイマー = setInterval(function () {
var oDiv = document.getElementById('div1');
varspeed = (end - oDiv.offsetTop) //DIV の速度を計算します。(エンドポイント - offsetTop の高さ) / スケーリング係数となります。
速度 = 速度 > 0 ? Math.ceil(speed) : Math.floor(speed) //小数点以下を避けるために、整数に丸めます。
if (oDiv.offsetTop == end) { //DIV が最後に達したら、setInterval を閉じます。
クリアインターバル(タイマー);
}
それ以外 {
oDiv.style.top = oDiv.offsetTop + Speed + 'px'; // div を移動します。
}
}、30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>