Отображение контента за пределами ScrollView

Компонент ScrollView в SwiftUI автоматически обрезает свое содержимое, чтобы элементы прокрутки всегда оставались полностью внутри области контейнера. Однако, использую модификатор scrollClipDisabled(), стандартное поведение можно изменить, отключив обрезку контента.

Важно: Изменение поведения не влияет на обработку касаний пользователя, т.е. область касания остается в пределах ScrollView. По умолчанию, когда элементы находятся внутри ScrollView, все касания по этим элементам обрабатываются как взаимодействие с ними. Однако, если элементы выходят за границы ScrollView из-за использования scrollClipDisabled(), любые касания по «выпавшим» элементам не будут регистрироваться как взаимодействие с ними. Вместо этого, эти касания будут регистрироваться как взаимодействие с тем, что находится под этими элементами.

Поэтому, хотя scrollClipDisabled() может быть полезным для создания визуальных эффектов, таких как тени, которые выходят за пределы области прокрутки, его стоит использовать с осторожностью, чтобы не создавать проблем с интерфейсом пользователя. В частности, если критически важные элементы управления оказываются вне области прокрутки и становятся неработоспособными, это может привести к проблемам с пользовательским опытом.

Давайте рассмотрим c VStack, в котором сверху и снизу расположены статичные текстовые элементы, а между ними — область с прокруткой. При начале прокрутки элементы этой области будут располагаться прямо под верхним текстом, но в процессе прокрутки они смогут выходить за его границы:

VStack {     Text("Fixed at the top")         .frame(maxWidth: .infinity)         .frame(height: 100)         .background(.green)         .foregroundStyle(.white)      ScrollView {         ForEach(0..<5) { _ 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) } 

При работе с модификатором scrollClipDisabled() важно помнить о двух вещах:

1. Вы можете задать свою форму обрезки, чтобы контролировать, насколько далеко элементы будут выходить за границы области прокрутки. Например, если после применения отступов padding() вы добавите форму обрезки в виде прямоугольника clipShape(.rect), элементы не будут «выпадать» за пределы области бесконечно.

2. Поскольку элементы прокрутки теперь могут перекрывать окружающие их элементы, вам может потребоваться использовать модификатор zIndex() для корректировки их вертикального расположения. Например, если у других элементов используется стандартный Z-индекс, то применение zIndex(1) к ScrollView заставит его дочерние элементы отрисовываться поверх других элементов.