수동 스크롤 때까지 Chrome에서 프로그래밍 방식으로 스크롤되지 않음

Question

사이드 서랍 메뉴가 열려있을 때 모바일 사용자 용으로 멋진 UX를 만들려면 앱 컨테이너 (서랍을 제외한 모든 부분)에 overflow: hidden 및 height: 100vh을 설정합니다. 서랍이 열려있는 동안 그것을 스크롤 할 수 없습니다.

일반적으로 overflow 및 height 속성을 제거하면 창이 화면 위로 되돌아갑니다. 이를 회피하기 위해, 원래의 스크롤 위치 (서랍 앞)를 저장하고 서랍이 window.scrollTo(0, pos)으로 닫힐 때 다시 설정합니다.

내가 알아챈 점은을 수동으로 스크롤 할 때까지 Chrome이 프로그래밍 방식으로 을 스크롤 할 수 없다는 것입니다.

if (!drawerIsOpen && drawerIsClosing) { 
    let done = false; 
    const interval = setInterval(() => { 
    if (window.scrollY !== this.props.store.app.scrollPosition) { 
     console.log('attempting'); 
     window.scrollTo(0, this.props.store.app.scrollPosition); 
    } else { 
     clearInterval(interval); 
    } 
    }, 50); 
} 

그 간격이 영원히 실행되지만 수동으로 창을 스크롤 두 번째는, 크롬은 프로그램 적으로 스크롤 할 수 있으며 간격이 중단됩니다 : 나는 실행하여 테스트했습니다. 사파리와 파이어 폭스로 이것을 테스트 해 본 결과이 동작을 표시하지 않습니다.

이 요소는 포커스가있는 요소와 관련이 있습니까? 사용자가 페이지에서 어떤 방식 으로든 상호 작용할 때까지 Chrome은 스크롤 위치에 대한 내부 지식을 업데이트하지 않습니까?

Answer 1

window.scrollBy(0, scrollPosition)으로 끝났습니다. window.scrollTo() 또는 document.body.scrollTop과 같은 문제가없는 것으로 보입니다.