기본 JS는 window.scrollTo()를 기반으로 수직 스크롤 애니메이션 도구 기능을 캡슐화합니다.

이 글은 주로 window.scrollTo()를 기반으로 네이티브 JS에 캡슐화된 수직 스크롤 애니메이션 도구 기능을 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다. 기본 JS는 window.scrollTo()를 기반으로 앵커 포인트 위치 지정 및 맨 위로 복귀와 같은 작업에 사용할 수 있는 수직 스크롤 애니메이션 도구 기능을 캡슐화합니다.

캡슐화 이유:

Vue 프로젝트에서 수직 스크롤 효과를 달성해야 할 때 염두에 두어야 할 두 가지 초기 방법이 있습니다.

1: window.scrollTo() 메서드를 사용하지만 이 메서드에는 애니메이션 효과이므로 수동으로 캡슐화해야 합니다.

2: JQuery의 애니메이션 기능을 사용하면 분명한 단점이 있습니다. JQuery를 도입해야 합니다.

물론 첫 번째 옵션을 선택하는 것이 훨씬 좋습니다.

다음은 window.scrollTo()를 캡슐화한 scroll() 메소드입니다. 파일 이름은 scroll.js

// Created by xiaoqiang on 30/05/2018.
/**
 * @param {numeber} currentY 需要移动的dom当前位置离网页顶端的距离
 * @param {number} targetY 需要移动的dom当前位置离要移到的位置的距离
 */
function scroll (currentY, targetY) {
  // 计算需要移动的距离
  let needScrollTop = targetY - currentY
  let _currentY = currentY
  setTimeout(() => {
    // 一次调用滑动帧数，每次调用会不一样
    const dist = Math.ceil(needScrollTop / 10)
    _currentY += dist
    window.scrollTo(_currentY, currentY)
    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
    if (needScrollTop > 10 || needScrollTop < -10) {
      scroll(_currentY, targetY)
    } else {
      window.scrollTo(_currentY, targetY)
    }
  }, 1)
}
// 暴露此方法
export default scroll

사용 방법

예를 들어 vue에서는 다음과 같이 사용할 수 있습니다.

import 스크롤 form '@/common/util/scroll .js'

그런 다음 트리거 이벤트에 응답하는 함수에서 스크롤()이 호출됩니다. 다음과 같은 두 개의 매개변수가 전달되어야 합니다.

      methods: {
        test () {
          const scrollHeight = document.getElementsByClassName('scroll-element')[0].offsetTop
          const currentY = document.documentElement.scrollTop || document.body.scrollTop
          scroll(currentY, scrollHeight)
        }
      }

오류가 있거나 불분명한 경우 개선할 수 있는 부분이나 지적해 주세요오(∩_∩)오~

이상 내용은 모두의 학습에 도움이 되었으면 좋겠습니다. PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

JS는 병합 정렬을 구현

vue를 구현하여 디지털 스크롤 증가 효과를 얻습니다.

Jquery는 로딩 전환 마스크를 추가합니다

위 내용은 기본 JS는 window.scrollTo()를 기반으로 수직 스크롤 애니메이션 도구 기능을 캡슐화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!