javascript - 스와이프 탭 전환 각 버튼을 클릭하여 스와이프 컨테이너를 이동하려면 어떻게 해야 합니까?

Question

스와이프 탭 전환 각 버튼을 클릭하면 스와이퍼 컨테이너가 움직입니다.

예를 들어 NetEase의 상단 탭 전환은 각 버튼을 클릭하면 탭 전환 컨테이너가 스크롤됩니다. (1: 좌우로 스크롤할 수 있으며 콘텐츠가 컨테이너 전체를 차지합니다.)

http://3g.163.com/touch/auto?...

Answer 1

가로 스크롤 .topnav_list

Answer 2

데모를 만들었습니다: https://codepen.io/anon/pen/d...

기본적인 기능만을 구현한 것으로, 이동위치가 그다지 정확하지 않습니다. 실제 사용시에는 이동량을 직접 조절하셔야 합니다.

원리는 각각의 .topnav_item 绑定一个 onClick 的 listener。当点击元素时，取得该元素在 topnav_list 中的 index，然后把 .topnav_list를 너비 * 인덱스 거리만큼 왼쪽으로 이동하는 것입니다(정확한 값은 아니며 조정이 필요함).

DEMO에서는 ES2015의 일부 구문이 사용됩니다. 실제로 사용할 때는 브라우저 호환성에 주의하세요. 그림은 jQuery의 .scrollLeft() 메소드를 사용하여 수고를 덜어줍니다. 실제 사용에서는 직접 구현할 수 있습니다.