요소에 스크롤 이벤트 리스너가 추가되었지만 scrollTop이 0이 아닌 경우에만 올바르게 이동합니다.

Question

그래서 저는 완료/활성 작업이라는 두 개의 목록이 있는 작은 스크립트를 작성했습니다. 버튼을 클릭하면 작업 목록을 전환할 수 있고, "추가 정보"를 클릭하면 작업에 대한 자세한 정보를 읽을 수 있습니다. 추가 정보를 클릭하면 새 div 요소가 생성되고 해당 호스트 요소의 Y 위치를 따르려고 하는데 절반만 작동합니다. 다음과 같습니다. 여기에 이미지 설명을 입력하세요

이것은 스크롤 가능한 요소 scrollTop가 0이 아닐 때 발생한다고 확신하는 버그입니다(올바른 방식으로 생성되었으며 스크롤을 시작할 때마다 즉시 뛰어 올라 작업 자체를 덮어씁니다). 여기에 이미지 설명을 입력하세요.

이것은 스크롤의 px 크기, 스크롤 방향 및 "추가 정보" div 요소 이동을 담당하는 코드 부분과 이를 생성하는 부분입니다. 이것이 어디에서 문제인지 모르겠습니다. 나는 전체를 코딩하고 있습니다. 아직 새롭고 css/html에 익숙하지 않습니다.

으아아아

HTML 및 CSS 스니펫을 추가합니다. 하지만 제가 수강 중인 강좌의 강사가 작성한 것이므로 필요하지 않을 것 같습니다.

HTML 조각은 다음과 같습니다.

으아아아

관련 CSS 스니펫은 다음과 같습니다.

으아아아

Answer 1

이 문제는 CSS로 해결할 수 있으며 Javascript 코드에서 다음을 제거할 수 있습니다.

으아악

대신 다음을 추가하여 CSS를 변경하세요.

으아악

이렇게 하려면 Javascript 코드로 생성한 div.card 元素必须是相应 li.card 요소의 하위 요소를 생성하세요. 또한 귀하의 원본 코드가 이전에 찾은 코드와 유사하다고 (아마도 잘못) 가정하고 원본 코드를 실행할 수 없었기 때문에 귀하의 질문에 대한 댓글에 게시했습니다.

당신의 것 position:absolute 最初不起作用，因为 li.card 父级的位置未明确设置，默认为 static.

EDITz-index 비트를 언급하는 것을 잊어버렸습니다. 정보 상자가 완전히 표시되지 않기 때문에 이는 필수입니다(다음 li.card 요소 아래에 있음).