우연히 무한 스크롤을 구현하려고합니까?마우스 휠을 사용하는 대신 스크롤 막대를 드래그 해보십시오. 어떤 이유로 Chrome은 마우스 스크롤 이벤트로 어려움을 겪고있는 것 같습니다. 스크롤 막대가 잘 작동하면 계속 읽으십시오. 내가 AJAX 요청을 트리거 것 scroll 이벤트에 감시자를 부착했다 https://github.com/TryGhost/Ghost/issues/7934
-
이 포스팅은 비슷한 경험 누군가의 상세한 연습을 제공합니다. 나는 요청을 줄였으며 단지 1 명이 보내 졌음을 알 수 있었다. 내 dev에 서버가 몇 ms 이내에 응답을 반환 봤지만 크롬에 2 초 지연이있을 것입니다. 렌더링, API 호출 없음, 아니요 및 스크립트 실행 중. 그러나 "콘텐츠 다운로드"는 14kb에 3 초가 걸릴 것입니다. 다른 브라우저에는이 문제가 없습니다.
나는 setTimeout 대신 requestAnimationFrame을 사용하면 문제가 해결된다는 제안을 발견했습니다. 이러한 접근 방식은 "대기 중"또는 녹색이 중요 할 때 접근 방식이 작동하는 것처럼 보이며 "내용 다운로드"또는 파란색은 그렇지 않습니다.
파기 시간이 지난 후에 조건부로 mousewheel 이벤트에서 e.preventDefault()을 호출 해 보니 놀랍게도 효과가있었습니다. 주의 할
몇 가지 :
1) 나는 API 호출을 만들기 위해 mousewheel 이벤트를 사용하지 않았다. 나는 조절과 함께 scroll 이벤트를 사용했습니다.
2) mousewheel 이벤트는 비표준 이벤트이므로 사용하지 않아야합니다. https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
3)하지만이 경우에는 크롬 때문에 mousewheel 이벤트를보고 처리해야합니다. 다른 브라우저는 지원하지 않는 이벤트를 무시하고 다른 브라우저에서 문제가 발생하는지 아직 확인하지 못했습니다.
4) 매번 preventDefault()에 전화하기를 원하지 않으므로 마우스로 스크롤 할 수 없으므로 :) 세로 스크롤을 사용하는 경우 deltaY이 1 일 때만 전화를 걸 수 있습니다. 기본적으로 더 이상 스크롤 할 수없는 경우 첨부 된 이미지에서 deltaY이 1임을 알 수 있습니다. 페이지를 스크롤 할 수 없어도 mousewheel 이벤트가 발생합니다. 보조 노트로, 수직으로 스크롤 할 때 deltaX은 -0이고 수평으로 스크롤 할 때 deltaY은 -0입니다.
내 솔루션 : 나는 일을 본 적이하고 내가 언급이나 다른 곳에서 논의 보지 못한 유일한 솔루션을하고있다
window.addEventListener("mousewheel", (e) => {
if (e.deltaY === 1) {
e.preventDefault();
}
})
. 도움이되기를 바랍니다. 나는이가 크롬과 관련된 생각
console log of mousewheel event
는 기능 https://www.chromestatus.com/feature/5745543795965952하는 TouchMove 같은 모바일 이벤트에 귀를 기울 될 때 일을 방지하기 위해 설계 (수동 이벤트 리스너) - 추가 모든 mousewheel 이벤트 리스너가 나를 위해이 문제를 해결했습니다 (콜백이 빈 함수 였지만). – NDavis