Icroll.js 자식 요소 오버플로 : IOS에서 스크롤이 작동하지 않음

Question

모든 요소가 큰 가로 스크롤을 사용하여 화면 높이에 맞춰야하는 프로젝트에 Iscroll.js를 사용합니다. 내 문제는 콘텐츠의 양에 따라 수직으로 넘치는 특정 요소가 있다는 것입니다.

저는이 요소에 "overflow-y : scroll"을 사용했으며 데스크탑 브라우저에서는 정상적으로 작동하지만 모바일에서는 정상적으로 작동하지 않습니다.

나는 webkit 접두어 -webkit-overflow-scroll : touch를 시도했지만 그 또한 작동하지 않습니다.

내 수직 스크롤 요소에 대한 CSS는 다음과 같습니다

white-space: nowrap; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 

당신이 관심이 나는 여러 중첩 된 스크롤러를 IScrolll = 되 돌리는 및 사용하여이 문제를 해결하기 위해 관리하는 것이 누군가를 위해 http://govanhillpeopleshistory.com/dev/

Answer 1

에서 사이트를 찾을 수 있습니다 내 주 스크롤러 내부. this question과 비슷한 해결책을 사용했습니다.

기본적으로 모든 IScroll 개체를 보관할 배열을 만들고 스크롤 할 수있는 모든 요소를 ​​반복하고 해당 ID를 가져온 다음 가져온 ID를 사용하여 새 배열 요소와 Iscroll 개체를 만듭니다. Heres 내 코드 :

  articleBottomState.find('.cards-wrapper').each(function(){ 

      $(this).find('.content-card').each(function(){ 
       //console.log(counter++); 

       var currentCardID = '#' + this.id; //Get Scrollable Areas ID 
       console.log(currentCardID); 

       //Add another array element to the myscrollers array 
       myscrollers[vertScrollCOunter++] = new IScroll(currentCardID, { 
       scrollX: true, 
       scrollY: true, 
       mouseWheel: true, 
       momentum: false 
       }); 
      }); 

      });