Icroll.js Child Element overflow: scroll not working on IOS

Question

Im using Iscroll.js for a project that requires all elements to fit the height of the screen with a large horizontal scroll. My issue is there are certain elements that overflow vertically depending on the amount of content they have.

I have used "overflow-y: scroll" on these elements and it works fine on desktop browsers but not on mobile.

I have tried the webkit prefix -webkit-overflow-scrolling: touch but that also does not work.

the css for my vertical scroll elements is:

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

You can find the site at http://govanhillpeopleshistory.com/dev/

Answer 1

For anyone that interested I managed to fix this by reverting to IScrolll = and using multiple nested scrollers inside my main scroller. Used a similar solution to this question.

Basically create an array to hold all of your IScroll objects, iterate over every element you want to be scrollable, grab its ID and and then create a new array element and Iscroll Object using the ID you Grabbed. Heres my code:

          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
              });
            });

          });