js が dom 要素の水平および垂直スクロール アニメーションを実装する方法を説明する例

この記事では、js で dom 要素の横スクロールアニメーションと縦スクロールアニメーションを実装する方法を紹介します。

#settimeout を通じて実装されたスクロール アニメーションは、繰り返しクリックをサポートして高速化します

水平スクロールと垂直スクロールをサポートします。クイッククリックすると、前回スクロールしなかった距離が重ねて表示されます。スクロール時間は変わらず、スクロール速度が速くなります。

使用法

1. 以下のコードをコピーします;

2. 対応するメソッドをエクスポートします

movingColumn - 垂直スクロール moving- -水平スクロール

#3. この関数は 3 つのパラメータを受け取ります dom: スライドする要素 space: 1 回のクリックでスクロールする距離

istop/isLeft 上/左にスクロールするかどうか

機能変更

const hz = 60 指定時間内に目的の位置まで数回スクロールします 60は、コンピュータが認識できるリフレッシュレートです。人間の目

各スクロールの時間は、

settime<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let timer:any = null // 定时器 let TargetLocation = -1 // 上一次点击应该滚动到的目标位置 let toltalSpace = 0 // 本次要滚动的距离 /** * @info 竖直滚动 * @info 滚动动画 hz 刷新率 可以修改滚动的速度 * @params dom：要滚动的元素； space 要滚动的距离； istop 滚动的方向; */ const movingColumn = (dom:HTMLDivElement, space: number, istop:boolean) =&gt; { // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起 if (timer &amp;&amp; TargetLocation !== -1) { toltalSpace += TargetLocation - dom.scrollTop // 计算本次的目标距离 if(istop) { TargetLocation = dom.scrollTop + toltalSpace + space } else { TargetLocation = dom.scrollTop + toltalSpace - space } } else if (!timer) { toltalSpace = 0 TargetLocation = -1 } if (istop) { toltalSpace -= space } else { toltalSpace += space } // 获取本次的目标位置 const position = dom.scrollTop TargetLocation = position + toltalSpace clearInterval(timer) timer = null const hz = 60 let i = 1 timer = setInterval(() =&gt; { dom.scrollTop = position + i * toltalSpace / hz ++i if (i &gt;= hz) { clearInterval(timer) timer = null dom.scrollTop = TargetLocation // 位置修正 toltalSpace = 0 TargetLocation = -1 } }, 1) } /** * @info 水平滚动 * @info 滚动动画 hz 刷新率 可以修改滚动的速度 * @params dom：要滚动的元素； space 要滚动的距离； isLeft 滚动的方向; */ const moving = (dom:HTMLDivElement, space: number, isLeft:boolean) =&gt; { // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起 if (timer &amp;&amp; TargetLocation !== -1) { toltalSpace += TargetLocation - dom.scrollLeft // 计算本次的目标距离 if(isLeft) { TargetLocation = dom.scrollLeft + toltalSpace + space } else { TargetLocation = dom.scrollLeft + toltalSpace - space } } else if (!timer) { toltalSpace = 0 TargetLocation = -1 } if (isLeft) { toltalSpace -= space } else { toltalSpace += space } // 获取本次的目标位置 const position = dom.scrollLeft TargetLocation = position + toltalSpace clearInterval(timer) timer = null const hz = 60 let i = 1 timer = setInterval(() =&gt; { dom.scrollLeft = position + i * toltalSpace / hz ++i if (i &gt;= hz) { clearInterval(timer) timer = null dom.scrollLeft = TargetLocation // 位置修正 toltalSpace = 0 TargetLocation = -1 } }, 1) } export { moving, movingColumn }</pre><div class="contentsignin">ログイン後にコピー</div></div> で

1ms * hz = 60ms です関連する推奨事項: [

JavaScript ビデオチュートリアル]

##

以上がjs が dom 要素の水平および垂直スクロール アニメーションを実装する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。