Vertical and horizontal scroll

Many of the applications you build despite a complex layout will still fit onto a single page. To help scroll long content alongside shorter content use the scroll() utility function.

scroll(tag, direction = "vertical")

Arguments

tag	A tag element.
direction	One of "horizontal" or "vertical" specifying which direction to scroll overflowing content, defaults to "vertical", in which case the content may scroll up and down.

See also

Other design utilities: active(), affix(), background(), border(), display(), float(), font(), height(), padding(), shadow(), width()

Examples

### A simple scroll

div(
  lapply(
    rep("Integer placerat tristique nisl.", 20),
    . %>% p() %>% margin(bottom = 2)
  )
) %>%
  height(20) %>%
  border("black") %>%
  scroll()
#> <div class="h-20 border border-black scroll-y">
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#>   <p class="mb-2">Integer placerat tristique nisl.</p>
#> </div>