Scrollable areas?

Community resources General
1

I’m looking around for the right prototype tool in which I can edit a part of a page to be scrollable. For example, a box with a scrollable list. Will I be able to do this in Webflow?

Thank you very much for all your help.

2

Yes. Short tuturial :slight_smile:

Scrollable Y

Height Default

Default value: auto

the element will automatically adjust its height to allow its content to be displayed correctly. w3schools

The browser will calculate and select a height for the specified element. MDN

This idea also true on webflow (Under Style tab):

image

Make area Scrollable

Start point:

image
image603×644 19.4 KB

1/2. Set height

First, you should change the default value of height from auto to some length value (ems, %, px, vh. Read her about Width & Height Units).

  • same idea for: “max-height”

image

2/2. Set overflow to auto

Not CSS Definition of overflow (Help to understand / Remember the idea):

to flow over bounds

Now the content overflows the element’s box bounds (the red /////// area)
image

By default value is visible:

visible The overflow is not clipped. It renders outside the element’s box.

Now you have 2 choices:

  • Set overflow to visible (Always display scrollbars)
  • Set overflow to auto (Displays scrollbars if content overflows)

Set auto ==> Result:

image
image520×653 22.7 KB

Read more // Webflow

Read more // HTML & CSS

1 Like