javascript - Toutiao의 헤더 탐색 목록을 구현하는 방법을 안내해 줄 수 있는 사람이 있습니까? 클릭하면 어떤 유형이 중앙에 표시됩니까?

Question

지금 클릭하는 기술이 중간에 있는데 어떻게 다른걸 클릭해서 중간으로 갈 수 있나요?

Answer 1

군사 클릭시 군돔과 부모돔 왼쪽 사이의 거리를 구한 후 거리를 2로 나눈 후 이동시켜주세요

Answer 2

가장 왼쪽을 클릭해서 중앙에 놓으면 왼쪽이 비어있지 않나요?

Answer 3

어떤 유형을 클릭하면 이 돔과 상위 돔의 왼쪽 사이의 거리를 계산할 수 있습니다.
화면 너비를 계산할 수 있습니다.
돔의 거리를 화면 너비의 절반과 비교하세요. 그리고 언제 움직여야 할지, 얼마나 멀리 움직여야 할지 판단하세요

Answer 4

margin-left:-(x * this.index)px;
현재 클릭한 개체의 인덱스를 결정한 다음 오프셋을 계산합니다

Answer 5

어제 데모 테스트를 했습니다. Unexpected Encounter의 레이아웃도 Toutiao와 동일합니다.
JQ 구현 방법:

html

으아악

css

으아악

jq

으아악