Scroll Area

Overview Scroll area Phoenix LiveView component

The Scroll Area component in Mishka Chelekom provides a clean and efficient way to handle scrollable content within your Phoenix LiveView application.

This component can be integrated with various other components, such as table contents, Drawer, Sidebar, to create scrollable areas that are easily navigable using keyboard or touch input on mobile devices.

Key Features of Mishka Chelekom Scroll Area

Full keyboard navigation support with arrow keys and Page Up/Down
Touch-friendly scrolling with smooth momentum on mobile devices
Responsive scrollbar visibility that adapts to input method
Screen reader compatible for improved accessibility
Native-like scrolling behavior across all platforms

Input Methods

Keyboard: Arrow keys, Page Up/Down, Home/End
Touch: Swipe gestures with inertia scrolling
Mouse: Wheel scrolling and draggable scrollbar
Trackpad: Smooth two-finger scrolling support

Overview

Vertical

Type

Width

Padding

Height

class

<.scroll_area id="unique_id">
  // Content
</.scroll_area>

If the generator did not automatically add the required styles, please add the following CSS code to your stylesheet:

  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

Horizontal prop

The horizontal prop is a boolean that enables horizontal scrolling. By default, it's set to false.

<.scroll_area id="unique_id" horizontal vertical={false}>
  // Content
</.scroll_area>

Vertical prop

The vertical prop is a boolean that enables vertical scrolling. By default, it's set to true.

Better Organization

Scroll areas help organize content efficiently, especially when dealing with long lists or large amounts of content in a confined space.

Enhanced UX

Provides smooth scrolling experience with custom scrollbars, improving user interaction and navigation within your application.

Space Efficiency

Maximizes screen real estate by containing content in fixed dimensions while maintaining access to all information through scrolling.

Responsive Design

Adapts seamlessly to different screen sizes and orientations, ensuring consistent content presentation across all devices.

<.scroll_area id="unique_id" vertical={false}>
  // Content
</.scroll_area>

Type prop

The type prop allows you to control the scrollbar's visibility and behavior. Available options are: auto (default) - scrollbar is always visible, never - scrollbar is hidden, and hover - scrollbar appears only when hovering over the content.

Versatile Integration

The scroll area component seamlessly integrates with various UI elements such as sidebars, drawers, and comboboxes. In sidebars, it enables smooth navigation through lengthy menu items, while in drawers it manages overflow content elegantly. For comboboxes, it handles long option lists efficiently, ensuring a clean and organized dropdown experience.

Enhanced Content Management

When combined with table of contents, modals, or data tables, the scroll area component maintains content accessibility while preserving layout integrity. It's particularly useful in documentation sections, chat interfaces, and content-heavy panels where vertical or horizontal space management is crucial, all while providing consistent scrolling behavior across different devices and screen sizes.

<.scroll_area id="unique_id" type="auto">
  // Content
</.scroll_area>

<.scroll_area id="unique_id" type="hover">
  // Content
</.scroll_area>

<.scroll_area id="unique_id" type="never">
  // Content
</.scroll_area>

Width prop

The width prop allows you to control the width of the scroll area using Tailwind CSS width classes.

Advanced Scroll Area Features

The scroll area component offers sophisticated features like customizable scrollbar visibility, smooth scrolling behavior, and responsive dimensions. With support for both vertical and horizontal scrolling, it adapts seamlessly to various content types and layout requirements, making it ideal for handling overflow content in a clean, accessible manner.

Flexible Integration

Whether you're building complex navigation systems, data tables, or content-rich interfaces, the scroll area component provides consistent scrolling behavior across different devices and browsers. Its configurable width, height, and padding options ensure optimal presentation while maintaining performance and user experience standards.

<.scroll_area width="w-full md:w-2/3">
  // Content
</.scroll_area>

Padding prop

The padding prop allows you to control the padding size of the scroll area content using Tailwind CSS width classes.

Integration with Other Components

Scroll areas enhance various UI components by providing controlled overflow:

In modals for long-form content
Within sidebars for extensive navigation menus
Inside dropdowns for lengthy option lists
For table bodies with many rows
In chat interfaces for message history

Benefits

By integrating scroll areas with other components, you can:

Maintain a compact UI footprint
Improve content accessibility
Create responsive layouts
Handle dynamic content gracefully
Ensure consistent scrolling behavior

<.scroll_area padding="extra_small"></.scroll_area>
<.scroll_area padding="small"></.scroll_area>
<.scroll_area padding="medium"></.scroll_area>
<.scroll_area padding="large"></.scroll_area>
<.scroll_area padding="extra_large"></.scroll_area>

Height prop

The height prop allows you to control the height of the scroll area using Tailwind CSS height classes.

Introduction to Phoenix LiveView Scroll Area

Scroll Area in Phoenix LiveView provides an elegant solution for managing scrollable content. It offers customizable scrollbars, responsive behavior, and smooth scrolling experiences. With support for both vertical and horizontal scrolling, it adapts seamlessly to various content types and screen sizes while maintaining performance and accessibility.

<.scroll_area height="h-fit md:h-80">
  // Content
</.scroll_area>

Content class prop

The content_class prop allows you to add custom styles to the content area of the scroll component.

Customizable Dimensions for Enhanced Integration

The scroll area component's flexible height and width customization makes it exceptionally versatile when integrated into other UI components. Whether embedding it within modals, sidebars, or complex dashboards, you can precisely control its dimensions using Tailwind CSS classes. This adaptability ensures optimal space utilization in nested layouts, responsive designs, and dynamic content scenarios. The component maintains smooth scrolling behavior and consistent user experience regardless of its configured size, making it perfect for everything from compact dropdown menus to full-page content sections.

<.scroll_area content_class="py-7 px-1">
  // Content
</.scroll_area>

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
type	string	No	Defines visibility behavior. Options: hover, auto, never. Default is auto.
horizontal	boolean	No	Determines if the wrapper is horizontal. Default is false.
vertical	boolean	No	Determines if the wrapper is vertical. Default is true.
height	string	No	Defines the height of the wrapper. Default is h-96.
width	string	No	Defines the width of the wrapper. Default is w-full.
padding	string	No	Specifies padding size for the content. Default is extra_small.
class	string	No	Custom CSS class for additional styling. Default is nil.
content_class	string	No	Custom CSS class for styling inner content. Default is nil.

Name	Type	Options	Recommended?
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--only`	string	scroll_area	Yes
`--module`	string	Something	NO

Mishka