Exemples pour expliquer comment js implémente l'animation de défilement horizontal et vertical des éléments dom

Cet article vous présentera comment implémenter une animation de défilement horizontal et vertical des éléments DOM dans js. J'espère que cela sera utile aux amis dans le besoin !

L'animation de défilement implémentée via settimeout prend en charge les clics répétés pour devenir plus rapide

Prend en charge le défilement horizontal et le défilement vertical. Les clics rapides superposeront la distance qui n'a pas été défilée la dernière fois. inchangée, la vitesse de défilement deviendra plus rapide

Comment utiliser

1 Copiez le code ci-dessous ;

2 Exportez la méthode correspondante movingColumn - défilement vertical moving--Défilement horizontal <code>movingColumn - 竖直滚动       moving--水平滚动

3、函数接收3个参数 dom: 要滑动的元素   space: 点击一次要滚动的距离  istop/isLeft 是否向上/左滚动

功能修改

const hz = 60  在规定时间分几次滚动到目标位置 60是人肉眼可识别的刷新率

每次滚动的时间为 settime里的1ms * hz  = 60ms

3. La fonction reçoit 3 paramètres dom : l'élément à faire glisser espace : la distance à parcourir lorsqu'on clique une fois istop/isLeft S'il faut faire défiler vers le haut/vers la gauche

modification de la fonction

const hz = 60 Faites défiler jusqu'à la position cible 60 plusieurs fois dans le temps spécifié, ce qui est un taux de rafraîchissement reconnaissable par l'œil humain
🎜🎜L'heure de chaque défilement est settime1ms * hz = 60ms dans /code> 🎜<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>🎜Recommandations associées : [🎜Tutoriel vidéo JavaScript🎜] 🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!