ScrollView horizontal 에 padding을 줄 경우 잘려서 보이는 문제 해결방법

가로 스크롤 슬라이드 작업 도중 이슈가 있었다

좌우 패딩이 있는 컨테이너에 스크롤 뷰를 넣으면, 가로 스크롤 시 컨텐츠가 잘리게 된다.

 

= scrollView에 직접 패딩을 줘야함.

<ScrollView
	horizontal={true}
	showsHorizontalScrollIndicator={true}
	style={[styles.section, styles.slidesWrapper,{paddingHorizontal: 25}]}
>

그래서 이렇게 이쁘게 좌우패딩을 줬다. 그런데 나온 결과는?

위 코드의 결과 화면

나는 분명 패딩을 좌우로 줬는데, 왼쪽에만 들어가고 오른쪽은 잘려서 나온다.

marginHorizontal로 변경도 해보고, 너비도 지정해보고 다양한 시도를 해봤지만 결과는 같았다.

 

원인은 ScrollView에 대한 이해부족!

<ScrollView
	horizontal={true}
	showsHorizontalScrollIndicator={true}
	style={[styles.section, styles.slidesWrapper]}
	contentContainerStyle={{paddingHorizontal: 25}}
>

style이 아닌 contentContainerStyle로 스타일을 줬다. 그 결과는?

위 코드의 결과화면

아주 잘 나온다. 

scrollView의 컨테이너는 contentContainerStyle을 이용해서 스타일을 줘야한다.

그냥 스타일로 넣었기 때문에 이상하게 들어간 것.