How to disable ScrollView clipping so contents overflow

Paul Hudson @twostraws June 16th 2023

Updated for Xcode 16.4

New in iOS 17

SwiftUI’s ScrollView automatically clips its contents, so that scrolling views always stay fully inside the scroll view area. However, if you use the scrollClipDisabled() modifier you can override this default behavior, allowing scrolling views to overflow.

Important: This does not affect the touch area of the scroll view, so if users tap on views that have overflowed your ScrollView that tap will actually be received by whatever is below. So, it’s probably best to restrict this a little, for example to allow shadows to flow outside the scrolling area without affecting other views too much.

As an example, this next example shows a VStack with fixed text at the top and bottom, with a scrolling area in the middle. The scrolling views will start neatly aligned below the top text, but as you scroll will overflow:

VStack {
    Text("Fixed at the top")
        .frame(maxWidth: .infinity)
        .frame(height: 100)
        .background(.green)
        .foregroundStyle(.white)

    ScrollView {
        ForEach(0..<5) { i in
            Text("Scrolling")
                .frame(maxWidth: .infinity)
                .frame(height: 200)
                .background(.blue)
                .foregroundStyle(.white)
        }
    }
    .scrollClipDisabled()

    Text("Fixed at the bottom")
        .frame(maxWidth: .infinity)
        .frame(height: 100)
        .background(.green)
        .foregroundStyle(.white)
}

Download this as an Xcode project

Views inside a scrollview scrolling outside their container as the user moves around.

There are two extra things it’s helpful to know when working with scrollClipDisabled():

You can add a custom clip shape to limit how far things overflow. For example, adding padding() then clipShape(.rect) means you get a little overflow, but not infinite.
Because scrolling views now overlap their surroundings, you may need to use zIndex() to adjust their vertical positioning. For example, if other views have the default Z index, then using zIndex(1) on your scroll view will make its children render over other views.

How to disable ScrollView clipping so contents overflow

Similar solutions…