그래서 저는 완료/활성 작업이라는 두 개의 목록이 있는 작은 스크립트를 작성했습니다. 버튼을 클릭하면 작업 목록을 전환할 수 있고, "추가 정보"를 클릭하면 작업에 대한 자세한 정보를 읽을 수 있습니다. 추가 정보를 클릭하면 새 div 요소가 생성되고 해당 호스트 요소의 Y 위치를 따르려고 하는데 절반만 작동합니다. 다음과 같습니다. 여기에 이미지 설명을 입력하세요
이것은 스크롤 가능한 요소 scrollTop가 0이 아닐 때 발생한다고 확신하는 버그입니다(올바른 방식으로 생성되었으며 스크롤을 시작할 때마다 즉시 뛰어 올라 작업 자체를 덮어씁니다). 여기에 이미지 설명을 입력하세요.
이것은 스크롤의 px 크기, 스크롤 방향 및 "추가 정보" div 요소 이동을 담당하는 코드 부분과 이를 생성하는 부분입니다. 이것이 어디에서 문제인지 모르겠습니다. 나는 전체를 코딩하고 있습니다. 아직 새롭고 css/html에 익숙하지 않습니다.
으아아아HTML 및 CSS 스니펫을 추가합니다. 하지만 제가 수강 중인 강좌의 강사가 작성한 것이므로 필요하지 않을 것 같습니다.
HTML 조각은 다음과 같습니다.
으아아아
관련 CSS 스니펫은 다음과 같습니다.
으아아아
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 문제는 CSS로 해결할 수 있으며 Javascript 코드에서 다음을 제거할 수 있습니다.
으아악대신 다음을 추가하여 CSS를 변경하세요.
으아악이렇게 하려면 Javascript 코드로 생성한
div.card元素必须是相应li.card요소의 하위 요소를 생성하세요. 또한 귀하의 원본 코드가 이전에 찾은 코드와 유사하다고 (아마도 잘못) 가정하고 원본 코드를 실행할 수 없었기 때문에 귀하의 질문에 대한 댓글에 게시했습니다.당신의 것
position:absolute最初不起作用，因为li.card父级的位置未明确设置，默认为static.EDITz-index 비트를 언급하는 것을 잊어버렸습니다. 정보 상자가 완전히 표시되지 않기 때문에 이는 필수입니다(다음
li.card요소 아래에 있음).