오버플로 스크롤

프로토타입 모드에서 프레임을 선택할 때 오른쪽 패널에 오버플로가 있는 스크롤 효과를 설정할 수 있습니다. Pixso 는 수평 스크롤, 수직 스크롤, 수평 및 수직 스크롤의 세 가지 유형의 스크롤을 지원합니다.

수직 스크롤

수직 스크롤은 슬라이드 또는 스크롤 프레임에서 위아래로 스크롤하여 긴 웹 페이지(쇼핑 앱, 뉴스 앱 등)을 방문할 때의 동작을 시뮬레이션할 수 있도록 지원합니다.

수평 스크롤

수평 스크롤은 프레임에서 좌우로 슬라이딩하거나 스크롤하고 그 동안 수직 위치를 유지하는 기능을 지원합니다. 일반적으로 슬라이드 쇼와 같은 슬라이딩 영역을 만드는 데 사용됩니다.

수평 및 수직 스크롤

수평 및 수직 스크롤은 프레임의 모든 방향으로 스크롤 할 수 있도록 지원합니다. 미리보기에 항상 사용됩니다.

팁: 오버플로 기능이 있는 스크롤을 사용하려면  오버플로할 콘텐츠가 프레임의 경계를 초과해야 합니다.

스크롤 가능한 뷰포트 설정하기

1. 프로토타입에서 보일 영역을 바깥 프레임으로 만듭니다. 이 프레임의 크기가 뷰포트가 됩니다.
2. 더 길거나 넓은 콘텐츠를 프레임 안에 배치합니다. 스크롤할 방향으로 콘텐츠가 바깥 프레임을 넘어야 합니다.
3. 바깥 프레임을 선택하고 프로토타입 패널을 엽니다.
4. 오버플로를 세로, 가로 또는 가로 및 세로 스크롤로 설정합니다.
5. 프로토타입을 재생하여 화면 밖의 콘텐츠까지 이동할 수 있는지 확인합니다.

세로 페이지는 콘텐츠 영역을 뷰포트보다 높게, 가로 목록은 더 넓게 만듭니다. 지도처럼 양방향으로 이동할 영역은 콘텐츠가 가로와 세로 양쪽에서 뷰포트를 넘어야 합니다.

세로 스크롤은 프레젠테이션에서 마우스 휠이나 드래그로 조작할 수 있습니다. 가로 또는 양방향 스크롤은 드래그하여 확인합니다.

프레임이 스크롤되지 않을 때

• 콘텐츠가 뷰포트 프레임 옆이 아니라 내부에 들어 있는지 확인합니다.
• 선택한 방향으로 콘텐츠가 뷰포트를 넘는지 확인합니다.
• 콘텐츠를 포함한 뷰포트 프레임에 오버플로 설정을 적용합니다.
• 디자인 캔버스만 보지 말고 프로토타입을 재생하여 확인합니다.