javascript - vue.js에 현재 인터페이스를 특정 부분으로 스크롤하는 더 빠른 방법이 있습니까?

Question

예를 들어 일반적으로 사용되는 맨 위로 돌아가려면 일반 HTML 페이지에서는 a 태그의 href 속성을 특정 ID로 설정한 다음 클릭 시 해당 부분으로 스크롤 막대를 스크롤하면 됩니다(물론 직접 설정할 수도 있습니다). 스크롤 막대의 높이) .

현재 요구 사항은 동일한 vue 구성 요소에서 다른 버튼을 클릭하여 스크롤 막대를 해당 부분으로 스크롤하는 것입니다(스크롤 효과는 선택 사항입니다). 위에서 언급한 방법을 직접 사용하면 페이지 이동이 발생하지만, 스크롤바의 높이를 직접 설정하면 위치를 하나씩 구해야 하므로 이전만큼 간단하지 않습니다.

몇 가지 조언을 부탁드립니다. 이 요구 사항을 실현하기 위한 더 좋은 아이디어가 있습니까?

Answer 1

Element.scrollIntoView()

이것은 JS의 기본 API입니다. 호출 후 브라우저는 대상 요소의 위치로 스크롤합니다.

https://developer.mozilla.org...

Answer 2

앵커 포인트를 사용할 수 없는 경우 각 부분의 스크롤 막대 위치만 가져올 수 있습니다.

Answer 3

아래와 같이 js만 사용하고 이벤트에서 대상 요소와 페이지 상단 사이의 거리를 가져온 다음 스크롤 축을 제어할 수 있습니다.

으아악

Answer 4

대략적으로 앵커포인트 방식은 확실히 폭력적이네요.

Answer 5

소개할 네이티브 js 플러그인 찾기

Answer 6

같은 질문이에요! 나도 모르겠다

Answer 7

https://huahua0406.github.io/...

아래에 해당하는 왼쪽 및 오른쪽 스크롤이 있습니다.

Answer 8

vue-router2

라우터에는 앵커 포인트를 시뮬레이션하는 기능이 있습니다