scrollContainer

Type: Function

How to get scrollContainer?

JavaScript

import { scrollContainer } from 'fds/system';

A styling mixin which creates a scroll container of the element. Renders the scroll container using a specified "paddingSize" and fixes any cross-browser quirks with padding in combination with the "overflow-y" CSS property.

Arguments

  1. paddingSize

    (Required)

    Type: Number | String | Object

    The amount of padding rendered by the component.

    This should be a either, A single size value, one of the following values:

    • 0 (zero, no padding at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large)

    to set the paddingSize for the top, right, bottom and left side to a single shared value.

    Or you can pass an object whose properties determine a specific padding size for either:

    • 'horizontal': %single size value%

    to set the 'left' and 'right' padding to the given size value (one of the values listed above)

    • 'vertical': %single size value%

    to set the 'top' and 'bottom' padding

    Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

  2. overflowY

    (Required)

    Type: String

    Sets the CSS "overflow-x" property to the specified value. The possible values are:

    • 'auto'

    • 'scroll'

    • 'hidden' (default)

    Default value

  3. overflowX

    (Required)

    Default value

Returns

Type: String

A style rule resulting in a generated class name on the element.

Generally created using fds/system/applyCss and/or any styling utility provided by FDS.