크롬은 이동체 오버 스크롤 - 행동 버그의 모든 어린이는

Question

그래서 크롬 63의 출시와 함께 우리는 새로운 overscroll-behavior 속성을 가져. 과거에는 overflow:hidden을 사용했지만이 새로운 속성은 모바일에서 스크롤하는 것과 관련된 버그를 더욱 두드러지게 만듭니다. 당신이 안드로이드에 크롬 자신의 데모 here을 구글의로 이동합니다

당신은 버그를 볼 수 있습니다. 대화 상자에서

아래로 스크롤하고 당신은 당신이 다음 아래로 스크롤 할 수 없습니다하지 않는 것을 볼 수 있습니다 다시 화면에서 손가락을 떼지 밖으로 스크롤하려고합니다. 똑같이 위로 올린 다음 손가락을 들어 올린 다음 손가락으로 들어 올리면 아래로 스크롤하여 붙어있을 것입니다. 이것은 overscroll-behavior가 사용되는지 여부에 관계없이 모든 자식에서 발생합니다. y 축에만 국한되지 않고 x에서도 발생합니다.

당신이 말할 수 이것은 사용자에게 매우 성가신입니다.

제가 생각할 수있는 유일한 해결책은 스크롤링 이벤트를 수신하는 것입니다. 사용자가 요소를 맨 아래로 스크롤하면 하단에서 스크롤을 0.1px만큼 조정하면 사용자가 절대 얻을 수 없습니다. 요소의 맨 아래로 이동하지만 이것은 매우 비쌉니다. 스크롤 이벤트가 항상 모바일에서 발생하여 스냅 효과가 발생하는 것은 아닙니다 (사용자 스크롤 동작을 위반하는 것과 같은 다른 효과가 무엇인지 알지 못합니다). 마치 손가락을 들었을 때처럼). contain

의 구글의 defention에서 또한

는 포함 - 방지는 체인을 스크롤합니다. 스크롤 조상 하지만 노드 내에서 지방의 효과가 표시됩니다에 전파되지 않습니다. 예를 들어 안드로이드에서 overscroll 글로우 효과 또는 에서 rubberbanding 효과 사용자가 스크롤 경계에 도달했을 때이를 알리는 iOS. 참고 : 를 오버 스크롤-동작을 사용하여 : html 요소에 포함이 오버 스크롤 탐색 작업을 방지 할 수 있습니다.

이것은 전혀 발생하지 않으므로 사양이 잘못되었습니다.

나는 이것이 모바일 용 크롬의 모든 버전에서 발생한다는 것을 알 수 있으며 웹뷰, 웹 사이트 또는 전체 화면이 홈페이지에 추가되는지 여부는 중요하지 않습니다.

버그 추적기가있는 경우 앱의 구조를 완전히 변경하지 않아도 해결 방법이있는 사람은 누구나 알고 있습니다.

업데이트 : 버그 그래서 내가 그것을 작동하지만 사용자가 작은 점프를 볼 수 있지만 내가 살 수있는 무역 꺼져 사용되는 해결 방법은 here

Answer 1

크롬 65에서이 문제가 해결되었습니다.

Answer 2

에 근무하고있다.

document.querySelector("#somediv").addEventListener("touchstart", function() { 

     var clientHeight = this.clientHeight; 
     var scrollHeight = this.scrollHeight; 
     var scrollTop = this.scrollTop; 
     var scroll = scrollHeight - scrollTop; 
     var scrollTo; 

     if(scroll == clientHeight) scrollTo = scrollTop - 1; 
     if(scroll == scrollHeight) scrollTo = scrollTop + 1; 

     if(scrollTo) return this.scrollTop = scrollTo; 

    });