js가 dom 요소의 수평 및 수직 스크롤 애니메이션을 구현하는 방법을 설명하는 예

이 기사에서는 JS에서 DOM 요소의 가로 및 세로 스크롤 애니메이션을 구현하는 방법을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

settimeout을 통해 구현된 스크롤 애니메이션은 반복 클릭을 더 빠르게 지원합니다.

가로 스크롤과 세로 스크롤을 지원합니다. 빠른 클릭은 지난 번 스크롤되지 않은 거리를 겹쳐서 표시합니다. 변경하지 않으면 스크롤 속도가 빨라집니다

사용 방법

1. 아래 코드를 복사하세요.

2 해당 메서드 movingColumn 내보내기 - 세로 스크롤 moving--가로 스크롤 <code>movingColumn - 竖直滚动       moving--水平滚动

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

功能修改

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

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

3 이 함수는 3개의 매개변수를 받습니다. dom: 슬라이딩할 요소 space: 한 번 클릭하여 스크롤할 거리 istop/isLeft 위로/왼쪽으로 스크롤할지 여부

기능 수정

const hz = 60 지정된 시간 내에 대상 위치 60까지 여러 번 스크롤합니다. 이는 사람의 눈으로 인지할 수 있는 새로고침 빈도입니다.
🎜🎜 각 스크롤의 시간은 settime1ms * hz = 60ms in /code> 🎜<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>🎜관련 권장 사항: [🎜JavaScript 비디오 튜토리얼🎜] 🎜🎜🎜

위 내용은 js가 dom 요소의 수평 및 수직 스크롤 애니메이션을 구현하는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!