바닐라 JavaScript에서 부드러운 스크롤을 구현하는 방법

코어 포인트

<.> jump.js 라이브러리를 사용하여 기본 JavaScript 스무드 스크롤을 구현하여 외부 종속성없이 스크롤 애니메이션을 단순화합니다.

<.> 다른 브라우저와의 더 넓은 호환성을 보장하기 위해 ES6에서 ES5로 변환하도록 jump.js 원본 코드를 수정하십시오.

메소드를 사용하여 원활한 애니메이션 업데이트를 수행하고 성능을 최적화하며 매끄러운 사용자 경험을 제공하십시오.
• 기본 내부 링크 동작을 가로 채고 갑작스런 점프를 부드러운 스크롤 애니메이션으로 대체하기 위해 사용자 정의 자바 스크립트를 구현하십시오.
이 기능을 인식하는 브라우저에서 기본 스무드 스크롤링을 지원하기위한 통합 CSS
• 속성 브라우저가 지원하지 않으면 JavaScript 폴백 메커니즘이 제공됩니다. requestAnimationFrame 스크롤 후 대상 요소에 초점을 맞추고, 키보드 내비게이션과 관련된 잠재적 인 문제를 해결하고, 모든 사용자의 유용성을 향상시켜 접근성을 설정합니다.
• 이 기사는 Adrian Sandu, Chris Perry, Jérémy Heleine 및 Mallory van Achterberg가 동료 검토했습니다. Sitepoint에서 최고의 콘텐츠를 얻으려면 Sitepoint의 모든 동료 검토 자에게 감사합니다! Smooth Scrolling은 기본 인 페이지 내비게이션 경험을 점진적으로 향상시키는 사용자 인터페이스 모드입니다. 클립에 표시됩니다.
이것은 새로운 것이 아니며 몇 년 동안 알려진 패턴이되었습니다. 예를 들어, 2003 년으로 거슬러 올라가는이 itepoint 기사를 확인하십시오! 그건 그렇고,이 게시물은 클라이언트 측 JavaScript 프로그래밍, 특히 DOM이 수년에 걸쳐 어떻게 변경되고 진화했는지를 보여주기 때문에 역사적으로 가치가 있습니다.
• jQuery 생태계에는 jQuery 또는 플러그인으로 직접 구현할 수있는이 패턴의 많은 구현이 있지만이 기사에서는 순수한 JavaScript 솔루션에 관심이 있습니다. 구체적으로, 우리는 Jump.js 라이브러리를 탐색하고 활용할 것입니다. scroll-behavior 라이브러리 및 기능 및 기능에 대한 개요를 소개 한 후에는 요구에 맞게 원본 코드를 변경할 것입니다. 이 과정에서 우리는 기능 및 클로저와 같은 핵심 자바 스크립트 언어 기술을 검토합니다. 그런 다음 부드러운 스크롤 행동을 테스트하기 위해 HTML 페이지를 만들고 사용자 정의 스크립트로 구현합니다. CSS의 네이티브 스무드 스크롤 지원이 추가되면 (사용 가능한 경우) 마지막으로 브라우저 내비게이션 기록에 대한 관찰을 할 것입니다.
이것은 우리가 생성 할 최종 데모입니다 CodePen에서 SitePoint (@SitePoint) 용 부드러운 스크롤 펜을 봅니다.
• 전체 소스 코드는 Github에서 찾을 수 있습니다.
jump.js jump.js는 기본 ES6 JavaScript로 작성되었으며 외부 의존성이 없습니다. 약 42 개의 SLOC 만있는 작은 유틸리티이지만 제공된 최소화 패키지의 크기는 약 2.67kb입니다. GitHub 프로젝트 페이지에 데모가 제공됩니다.

이름에서 알 수 있듯이 점프 만 제공합니다. 스크롤 막대 위치의 현재 값에서 대상 위치로의 애니메이션 변경, DOM 요소, CSS 선택기 또는 양수 또는 음수의 형태로 거리를 제공하여 지정됩니다. 수치 값. 이는 부드러운 스크롤 모드를 구현할 때 링크가 납치 된 것을 수행해야한다는 것을 의미합니다. 자세한 내용은 아래 섹션을 참조하십시오.

뷰포트의 수직 스크롤 만 지원됩니다.

우리는 지속 시간 (이 매개 변수가 필요함), 기능 완화 기능 및 애니메이션 끝에서 트리거 된 콜백과 같은 일부 옵션으로 점프를 구성 할 수 있습니다. 나중에 데모의 실제 응용 프로그램을 볼 수 있습니다. 자세한 내용은 문서를 참조하십시오.

jump.js는 인터넷 익스플로러 버전 10 이상을 포함하여 문제없이 "현대"브라우저에서 실행됩니다. 다시 지원되는 브라우저의 전체 목록은 문서를 참조하십시오. 적절한 requestAnimationFrame PolyFill을 사용하면 이전 브라우저에서도 실행될 수도 있습니다.

화면 뒤에서 빠르게 이해합니다 내부적으로, jump.js 소스 코드는 윈도우 객체의 requestAnimationFrame 메소드를 사용하여 스크롤 애니메이션의 각 프레임에서 업데이트 된 뷰포트 세로 위치의 위치를 ​​배열합니다. 이 업데이트는 완화 함수를 사용하여 계산 된 다음 위치 값을 Window.scrollto 메소드로 전달하여 달성됩니다. 자세한 내용은 소스 코드를 참조하십시오.

일부 사용자 정의 우리는 Demo를 탐구하기 전에 원래 코드를 약간 변경하여 Jump.js가 어떻게 사용되는지 보여 주지만 내부적으로 작동하는 방식을 수정하지는 않습니다.

소스 코드는 ES6로 작성되었으며 JavaScript 빌드 도구와 함께 사용하여 모듈을 번역하고 번들을 사용해야합니다. 일부 프로젝트에는 너무 많을 수 있으므로 어느 곳에서나 사용하기 위해 코드를 ES5로 변환하기 위해 리팩토링을 적용 할 것입니다.

먼저, ES6 구문 및 기능을 제거하겠습니다. 스크립트는 ES6 클래스를 정의합니다

우리는 생성자와 많은 프로토 타입 방법을 사용하여 ES5 "클래스"로 변환 할 수 있지만,이 클래스의 여러 인스턴스가 필요하지 않으므로 일반 객체 문자가있는 싱글 톤은 괜찮습니다.

클래스를 삭제하는 것 외에도 다른 변경을해야합니다. 의 콜백은 각 프레임의 스크롤 바 위치를 업데이트하는 데 사용되며 원래 코드에서는 초기화시 ES6 화살표 기능을 통해 호출됩니다. 그런 다음 기본 완화 함수를 동일한 소스 파일에 번들로 묶습니다. 마지막으로, 네임 스페이스 오염을 피하기 위해 IIFE (즉시 함수 표현식)를 사용하여 코드를 랩합니다.

이제 우리는 또 다른 재구성 단계를 적용 할 수 있습니다. 중첩 된 기능 및 폐쇄의 도움으로 객체 대신 함수 만 사용할 수 있습니다.

싱글 톤은 이제 스크롤 스크롤, 루프 및 엔드 콜백이 중첩 된 함수가되도록 호출되는 점프 함수이며, 이제 객체의 속성은 로컬 변수 (폐쇄)입니다. 이제 모든 코드가 함수로 안전하게 래핑되기 때문에 더 이상 IIFE가 필요하지 않습니다.

최종 리팩토링 단계로서, 루프 콜백이 호출 될 때마다 반복 타임 스테이트 재설정 점검을 피하기 위해, 처음으로 requestAnimationFrame ()가 호출되는 경우에 익명의 함수를 전달합니다. 루프 함수 리셋 TIRMERSTAR 변수 :

재구성 프로세스 중에 핵심 스크롤 애니메이션 코드가 변경되지 않았 음을 다시 한 번 주목하십시오.

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

테스트 페이지 이제 우리는 우리의 요구에 맞게 스크립트를 사용자 정의 했으므로 테스트 데모를 조립할 준비가되었습니다. 이 섹션에서는 다음 섹션에 설명 된 스크립트를 사용하여 부드러운 스크롤을 향상시키는 페이지를 작성합니다.

이 페이지에는 문서의 후속 섹션의 페이지 내 링크와 TOC에 대한 다른 링크를 가리키는 목차 (TOC)가 포함되어 있습니다. 우리는 또한 외부 링크를 다른 페이지에 혼합 할 것입니다. 이것은이 페이지의 기본 구조입니다 :

헤드에는 기본 가장 간단한 레이아웃을 설정하기위한 몇 가지 CSS 규칙을 포함 할 것입니다. 바디 태그 끝에는 두 개의 JavaScript 파일이 포함됩니다. 지금 우리가 논의 할 대본입니까?

메인 스크립트

이것은 사용자 정의 된 버전의 jump.js 라이브러리에서 애니메이션 점프를 사용하여 테스트 페이지 스크롤 경험을 향상시키는 스크립트입니다. 물론이 코드는 ES5 JavaScript로 작성됩니다.

해야 할 일에 대한 간단한 개요 : 페이지 내 링크의 클릭을 납치하고 브라우저의 기본 동작을 비활성화해야합니다 (갑자기 클릭하는 클릭 링크의 HREF 속성의 해시 조각으로 점프하십시오. 링크를하고 jump () 함수로 호출하여 바꾸십시오.

따라서 우선 페이지의 링크 클릭을 모니터링해야합니다. 이벤트 대의원을 사용하거나 각 관련 링크에 핸들러를 첨부하여 두 가지 방법 으로이 작업을 수행 할 수 있습니다.

이벤트 커미션

<code>var jump = (function() {

    var o = {

        jump: function(target, options) {
            this.start = window.pageYOffset

            this.options = {
              duration: options.duration,
              offset: options.offset || 0,
              callback: options.callback,
              easing: options.easing || easeInOutQuad
            }

            this.distance = typeof target === 'string'
              ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
              : target

            this.duration = typeof this.options.duration === 'function'
              ? this.options.duration(this.distance)
              : this.options.duration

            requestAnimationFrame(_loop)
        },

        _loop: function(time) {
            if(!this.timeStart) {
              this.timeStart = time
            }

            this.timeElapsed = time - this.timeStart
            this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

            window.scrollTo(0, this.next)

            this.timeElapsed               ? requestAnimationFrame(_loop)
              : this._end()
        },

        _end: function() {
            window.scrollTo(0, this.start + this.distance)

            typeof this.options.callback === 'function' && this.options.callback()
            this.timeStart = false
        }

    };

    var _loop = o._loop.bind(o);

    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    function easeInOutQuad(t, b, c, d)  {
        t /= d / 2
        if(t         t--
        return -c / 2 * (t * (t - 2) - 1) + b
    }

    return o;

})();
</code>

첫 번째 방법에서는 클릭 리스너를 요소 문서에 추가합니다. 이런 식으로, 페이지에있는 요소가있는 각 클릭 이벤트는 조상의 가지를 따라 Dom Tree로 DOM 트리로 거품이 켜집니다.

물론, 이제 등록 된 이벤트 리스너 (Onclick)에서는 수신 클릭 이벤트 객체의 대상을 확인하여 페이지의 링크 요소와 관련이 있는지 확인해야합니다. 이것은 여러 가지 방법으로 수행 될 수 있으므로 도우미 기능 isinpagelink ()로 추상화 할 것입니다. 우리는 나중에이 기능의 메커니즘을 살펴볼 것입니다.

수신 클릭이 내부 링크에있는 경우 이벤트 버블을 중지하고 관련 기본 조치를 차단합니다. 마지막으로, 우리는 점프 함수를 호출하여 대상 요소의 해시 선택기와 필요한 애니메이션을 구성하기 위해 매개 변수를 제공합니다.

이것은 이벤트 핸들러입니다 :

단일 핸들러 두 번째 방법을 사용하여 링크 클릭을 모니터링하고 각 페이지 내의 링크 요소에 위에서 설명한 약간 수정 된 이벤트 핸들러를 첨부하므로 이벤트 버블이 없습니다.

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

우리는 모든 요소를 쿼리하고 .slice () 트릭을 사용하여 반환 된 DOM NODELIST를 JavaScript 배열로 변환합니다 (대상 브라우저가 지원하는 경우 더 나은 대안은 ES6 array.from ()을 사용하는 것입니다. 방법). 그런 다음 배열 메소드를 사용하여 페이지 내의 링크를 필터링하고 위에서 정의한 동일한 도우미 기능을 재사용하고 마지막으로 리스너를 나머지 링크 요소에 첨부 할 수 있습니다.

이벤트 핸들러는 이전과 거의 동일하지만 물론 클릭 대상을 확인할 필요는 없습니다. 가장 좋은 방법은 사용 컨텍스트에 따라 다릅니다. 예를 들어, 초기 페이지로드 후 새 링크 요소를 동적으로 추가 할 수 있다면 이벤트 대의원을 사용해야합니다. [] 이제 우리는 isinpagelink ()의 ​​구현으로 돌아가서 이전 이벤트 핸들러 에서이 헬퍼 함수를 ​​사용하여 인 페이지 링크의 추상 테스트를 사용했습니다. 우리가 볼 수 있듯이,이 함수는 DOM 노드를 매개 변수로 취하고 부울 값을 반환하여 노드가 내부 링크 요소를 나타내는 지 여부를 나타냅니다. 링크가 다른 페이지를 가리킬 수 있기 때문에 전달 된 노드가 A 태그이고 해시 조각이 설정되었는지 확인하는 것만으로는 충분하지 않습니다.이 경우 기본 브라우저 작업을 비활성화해서는 안됩니다. 따라서 href 속성에 저장된 값 "마이너스"해시 조각이 페이지 URL과 같은지 확인합니다. striphash ()는 또 다른 도우미 함수이며, 스크립트가 초기화 될 때 변수 pageurl의 값을 설정하는 데 사용하는 것도 사용합니다.

이 문자열 기반 솔루션과 해시 조각의 가지 치기는 쿼리 문자열이있는 URL에서도 잘 작동합니다. 해시 부품은 URL의 일반적인 구조에서 뒤에 있기 때문입니다.

앞에서 말했듯이, 이것은이 테스트를 구현하는 한 가지 가능한 방법 일뿐입니다. 예를 들어,이 튜토리얼의 시작 부분에서 인용 된 기사는 다른 솔루션을 사용하여 Link HREFS의 위치 개체와의 구성 요소 수준 비교를 수행합니다.

우리는 두 이벤트 구독 방법 모두 에서이 기능을 사용한다는 점에 유의해야하지만 두 번째 방법에서는 이미 알고있는 요소의 필터로 사용하므로 Tagname 속성의 첫 번째 점검은 다음과 같습니다. 많은. 이것은 운동으로 독자에게 맡겨집니다.

<code>var jump = (function() {

    var o = {

        jump: function(target, options) {
            this.start = window.pageYOffset

            this.options = {
              duration: options.duration,
              offset: options.offset || 0,
              callback: options.callback,
              easing: options.easing || easeInOutQuad
            }

            this.distance = typeof target === 'string'
              ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
              : target

            this.duration = typeof this.options.duration === 'function'
              ? this.options.duration(this.distance)
              : this.options.duration

            requestAnimationFrame(_loop)
        },

        _loop: function(time) {
            if(!this.timeStart) {
              this.timeStart = time
            }

            this.timeElapsed = time - this.timeStart
            this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

            window.scrollTo(0, this.next)

            this.timeElapsed               ? requestAnimationFrame(_loop)
              : this._end()
        },

        _end: function() {
            window.scrollTo(0, this.start + this.distance)

            typeof this.options.callback === 'function' && this.options.callback()
            this.timeStart = false
        }

    };

    var _loop = o._loop.bind(o);

    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    function easeInOutQuad(t, b, c, d)  {
        t /= d / 2
        if(t         t--
        return -c / 2 * (t * (t - 2) - 1) + b
    }

    return o;

})();
</code>

접근성 고려 사항 현재, 당사 코드는 알려진 오류 (실제로는 깜박임/webkit/khtml에 영향을 미치는 관련없는 오류와 IE에 영향을 미치는 오류)에 취약합니다. 탭 키를 통해 TOC 링크를 탐색 할 때 링크를 활성화하면 선택한 섹션으로 내려 가면서 초점이 링크에 남아 있습니다. 즉, 다음 탭 키를 누르면 사용자가 선택한 섹션의 첫 번째 링크 대신 TOC로 다시 전송됩니다.

이 문제를 해결하기 위해 기본 스크립트에 다른 기능을 추가 할 것입니다.

콜백에서 실행됩니다. 우리는 점프 함수로 전달하고 과거로 스크롤하려는 요소의 해시를 전달합니다.

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

이 함수의 기능은 해시 값에 해당하는 DOM 요소를 얻고 초점을받을 수있는 요소 (예 : 앵커 또는 버튼 요소)인지 테스트하는 것입니다. 요소

가 기본적으로 (예 : 컨테이너)에 초점을 맞출 수없는 경우 tabindex 속성을 -1로 설정합니다 (키보드를 통해서는 프로그래밍 방식으로 초점을 수신 할 수 있음). 그러면 초점이 해당 요소로 설정되므로 사용자의 다음 키가 다음 사용 가능한 링크로 초점을 이동시킵니다. 여기에서 메인 스크립트의 전체 소스 코드를 볼 수 있으며, 이전에 논의 된 모든 변경 사항이 있습니다. CSS 를 사용하여 네이티브 스무드 스크롤을 지원합니다 CSS 객체 모델보기 모듈 사양 사양은 원활한 스크롤을 기본적으로 구현하기위한 새로운 속성을 도입합니다.

는 두 가지 값을 취할 수 있으며,

는 기본 순간 스크롤을 나타내고

는 애니메이션 스크롤을 나타냅니다. 이 사양은 지속 시간 및 시간 기능 (완화)과 같은 스크롤 애니메이션을 구성하는 방법을 제공하지 않습니다.

CSS-Scroll-Behavior를 사용할 수 있습니까? Caniuse.com의 데이터는 주요 브라우저에서 CSS-Scroll-Behavior 기능의 지원을 보여줍니다.

불행히도, 글을 쓰는 시점에 지원은 매우 제한적입니다. Chrome 에서이 기능은 개발 중이며 Chrome : // 플래그 화면에서이를 활성화하여 부분적으로 구현할 수 있습니다. CSS 속성은 아직 구현되지 않았으므로 Link Clicks에서 매끄러운 스크롤은 작동하지 않습니다.

어쨌든, 메인 스크립트를 약간 변경 함으로써이 기능을 사용자 에이전트에서 사용할 수 있는지 감지하고 나머지 코드를 실행하지 않도록 할 수 있습니다. 뷰포트에서 Smooth Scrolling을 사용하려면 CSS 속성을 루트 요소 html에 적용합니다 (그러나 테스트 페이지에서는 신체 요소에도 적용 할 수도 있습니다) : scroll-behavior.

그런 다음 스크립트 시작시 간단한 기능 감지 테스트를 추가합니다.

따라서 브라우저가 기본 스크롤링을 지원하는 경우 스크립트는 아무것도 수행하지 않고 종료됩니다. 그렇지 않으면 이전과 같이 계속 실행되며 브라우저는 지원되지 않는 CSS 속성을 무시합니다. auto smooth 결론 단순성 및 성능 구현 외에도 방금 논의한 CSS 솔루션의 또 다른 장점은 브라우저 기록 동작이 브라우저의 기본 스크롤을 사용할 때 경험하는 동작과 일치한다는 것입니다. 각 내부 점프 점프는 브라우저 기록 스택으로 푸시되며 해당 버튼으로 이러한 점프를 앞뒤로 탐색 할 수 있습니다 (그러나 적어도 Firefox에는 부드러운 스크롤이 없습니다).

우리가 쓴 코드에서 (이제 CSS 지원을 사용할 수 없을 때 폴백 체계로 생각할 수 있음) 브라우저 기록에 비해 스크립트의 동작을 고려하지 않았습니다. 맥락과 사용 사례에 따라, 이것은 관심이 없거나 아닐 수도 있지만, 스크립트가 기본 스크롤 경험을 향상시켜야한다고 생각한다면 CSS와 마찬가지로 일관된 동작을 기대해야합니다.

기본 JavaScript

로 스무딩 스크롤의 FAQ (FAQS) 라이브러리를 사용하지 않고 기본 JavaScript를 사용하여 부드러운 스크롤을 달성하는 방법은 무엇입니까?

라이브러리를 사용하지 않고 원활한 스크롤을 달성하려면 기본 JavaScript를 사용하는 것은 매우 간단합니다. 메소드를 사용하고 로 설정할 수 있습니다. 이 방법은 주어진 횟수만큼 창의 문서를 스크롤합니다. 간단한 예는 다음과 같습니다.

이 예에서는 클래스 가있는 요소를 클릭하면 페이지가 상단으로 매끄럽게 스크롤됩니다.

왜 내 부드러운 스크롤이 사파리에서 작동하지 않습니까? window.scrollTo 메소드를 사용하여 스무딩 스크롤링 함수와 와 같은 폴리 필드를 사용할 수 있습니다. 이를 통해 기본적으로 지원하지 않는 브라우저에서 매끄러운 스크롤이 가능합니다. behavior 특정 요소로 부드럽게 스크롤하는 방법은 무엇입니까? smooth 특정 요소로 부드럽게 스크롤하려면

메소드를 사용하고

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

옵션을

로 설정할 수 있습니다. 예는 다음과 같습니다. your-element 이 예에서는 클래스 가있는 요소를 클릭하면 페이지가 클래스 가있는 요소로 매끄럽게 스크롤됩니다.

부드러운 스크롤 속도를 제어 할 수 있습니까?

브라우저에서 처리되므로 스무그 스크롤의 속도는 직접 제어 할 수 없습니다. 그러나 를 사용하여 속도를 포함하여 스크롤 애니메이션을 더 잘 제어하기 위해 사용자 정의 스무드 스크롤 기능을 만들 수 있습니다.

수평 매끄러운 스크롤을 달성하는 방법은 무엇입니까?

수직 스무드 스크롤과 비슷한 방식으로 수평 스무드 스크롤을 달성 할 수 있습니다. 및 scrollTo 메소드는 또한 behavior 옵션을 수평으로 스크롤 할 수평 위치를 지정합니다. 예는 다음과 같습니다. smooth 이렇게하면 문서가 오른쪽에 100 픽셀을 부드럽게 스크롤하게 만듭니다. smoothscroll-polyfill 스마트 스크롤 애니메이션을 중지하는 방법?

스무그 스크롤 애니메이션은 브라우저에서 처리되므로 직접 중지 할 수 없습니다. 그러나 사용자 정의 스무드 스크롤 함수를 사용하는 경우

를 사용하여 애니메이션 프레임을 취소하여 애니메이션을 중지 할 수 있습니다.

고정 헤더로 매끄러운 스크롤을 달성하는 방법은 무엇입니까?

고정 헤더로 매끄러운 스크롤을 달성하려면 헤더 높이를 고려하기 위해 스크롤 위치를 조정해야합니다. 대상 스크롤 위치에서 헤더 높이를 빼서이를 수행 할 수 있습니다. Element.scrollIntoView 앵커 링크에 대한 매끄러운 스크롤을 달성하는 방법은 무엇입니까? behavior 앵커 링크에 대한 매끄러운 스크롤을 달성하려면 링크의 클릭 이벤트에 이벤트 리스너를 추가하고 메소드를 사용하여 대상 요소로 매끄럽게 스크롤 할 수 있습니다. 예는 다음과 같습니다. smooth 이것은 페이지의 모든 앵커 링크를 대상 요소로 부드럽게 스크롤합니다.

키보드 내비게이션을 사용하여 부드러운 스크롤을 달성하는 방법은 무엇입니까?

키보드 내비게이션을 사용하여 원활한 스크롤링을 달성하기 위해 키보드 이벤트를 가로 채고 문서를 수동으로 스크롤해야하기 때문에 더 복잡합니다. 이벤트 리스너를 이벤트에 추가하고

메소드를 사용하여 문서를 부드럽게 스크롤하여이를 수행 할 수 있습니다.

스무그 스크롤 구현의 호환성을 테스트하는 방법은 무엇입니까? keydown Browserstack과 같은 온라인 도구를 사용하여 부드러운 스크롤의 호환성을 테스트 할 수 있습니다. 이 도구를 사용하면 다른 브라우저와 다른 장치에서 웹 사이트를 테스트하여 모든 환경에서 구현이 올바르게 작동하는지 확인할 수 있습니다. window.scrollTo

위 내용은 바닐라 JavaScript에서 부드러운 스크롤을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!