Scroll behavior (vertical, horizontal) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set vertical scrolling in a Figma frame.

Figma

frame.scrollBehavior = '[1]';

Drag options to blanks, or click blank then click option'

Avertical

Bnone

Chorizontal

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing horizontal when vertical scrolling is needed.

Using 'auto' which may not explicitly set vertical scrolling.

Setting scrollBehavior to vertical enables vertical scrolling inside the frame.

2fill in blank

medium

Complete the code to enable horizontal scrolling in a Figma frame.

Figma

frame.scrollBehavior = '[1]';

Drag options to blanks, or click blank then click option'

Aauto

Bvertical

Cnone

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'vertical' instead of 'horizontal'.

Leaving scrollBehavior unset.

Setting scrollBehavior to horizontal allows the frame to scroll left and right.

3fill in blank

hard

Fix the error in the code to correctly set no scrolling in a Figma frame.

Figma

frame.scrollBehavior = '[1]';

Drag options to blanks, or click blank then click option'

Avertical

Bhorizontal

Cnone

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which allows scrolling if content overflows.

Using 'vertical' or 'horizontal' which enable scrolling.

Setting scrollBehavior to none disables scrolling inside the frame.

4fill in blank

hard

Fill both blanks to set vertical scrolling and enable horizontal overflow in a Figma frame.

Figma

frame.scrollBehavior = '[1]';
frame.overflowDirection = '[2]';

Drag options to blanks, or click blank then click option'

Avertical

Bhorizontal

Cboth

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up scrollBehavior and overflowDirection values.

Using 'horizontal' for scrollBehavior when vertical is needed.

Setting scrollBehavior to vertical enables vertical scrolling, and overflowDirection to both allows horizontal overflow as well.

5fill in blank

hard

Fill all three blanks to set horizontal scrolling, disable vertical overflow, and set scroll snap to start in a Figma frame.

Figma

frame.scrollBehavior = '[1]';
frame.overflowDirection = '[2]';
frame.scrollSnapType = '[3]';

Drag options to blanks, or click blank then click option'

Avertical

Bnone

Cstart

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing scrollBehavior and overflowDirection values.

Forgetting to set scrollSnapType correctly.

Setting scrollBehavior to horizontal enables horizontal scrolling, overflowDirection to none disables vertical overflow, and scrollSnapType to start aligns scroll snapping to the start.