Swift: Vertical scroll within horizontal scroll within vertical scroll

Question

I'm trying to create scrolling behaviour similar to Instagram's profile page, ie. a vertically scrolling view at the top (eg. name, avatar, etc.), and below that a grid of images that can pan left and right to reveal more sets of images, while also being able to vertically scroll.

For the record, I've read through tons of very similar posts to this, but I haven't found any that address the scrolling issue I bring up below.

This is the setup that I have so far:

Note: the width and height of the green scrollview is equal to that of the red one.

This setup gets me most of the way there, but if you swipe up and let go of the red scrollview it doesn't trigger the green scroll view to scroll. And conversely once the green scrollview has taken up the entire screen there's no way to get back to the red scrollview because its not triggered either.

I've had some success by enabling/disabling the green scrollview when the red scrollview scrolls past the height of the header, but its pretty janky.

  func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {

     let translation = scrollView.panGestureRecognizer.translation(in: scrollView.superview)
     var isScrollingDown = translation.y > 0
     let offset = scrollView.contentOffset.y

     if isScrollingDown, offset <= scrollHeight { //scrollHeight is equal to the height of the header cell
         greenScrollView.isScrollEnabled = false
     }
     else if !isScrollingDown, offset >= scrollHeight {
         greenScrollView.isScrollEnabled = true
     }
 }

Is this solution heading in the right direction, or is there a better way to accomplish this that I'm missing?

Answer 1

I struggled with this for awhile. I came across this and it has worked very well.

https://github.com/OfTheWolf/TwitterProfile