@inotom/sws-scrollable-container NPM

sws-scrollable-container

A Web Components to show scrollable hint.

Demo

Usage

Place sws-scrollable-container custom elements around the content.

<sws-scrollable-container>
  ... inner content ...
</sws-scrollable-container>
<script type="module" src="sws-scrollable-container.min.js" defer></script>

Set element's style by css custom properties.

sws-scrollable-container {
  --sws-scrollable-container-position: relative;
  --sws-scrollable-container-shadow-size: 0.9375rem;
  --sws-scrollable-container-shadow-from-x: 0;
  --sws-scrollable-container-shadow-from-y: 0;
  --sws-scrollable-container-shadow-to-x: 0;
  --sws-scrollable-container-shadow-to-y: 0;
  --sws-scrollable-container-overscroll-behavior: auto;
  --sws-scrollable-container-notification-top: 3.125rem;
  --sws-scrollable-container-notification-left: calc((100% - var(--sws-scrollable-container-notification-size)) / 2);
  --sws-scrollable-container-notification-size: 6.25rem;
  --sws-scrollable-container-notification-padding: 0.75rem;
  --sws-scrollable-container-notification-gap: 0.5rem;
  --sws-scrollable-container-notification-color: #fff;
  --sws-scrollable-container-notification-background-color: rgba(0, 0, 0, 0.5);
  --sws-scrollable-container-notification-backdrop-filter: blur(0.187rem);
  --sws-scrollable-container-notification-border-radius: 0.625rem;
  --sws-scrollable-container-notification-box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  --sws-scrollable-container-icon-scale: 1.5;
  --sws-scrollable-container-message-font-size: 0.75rem;
  --sws-scrollable-container-message-line-height: 1.25;
  --sws-scrollable-container-message-white-space: normal;
}

CSS custom properties

sws-scrollable-container

css custom property name	content	defaults
`--sws-scrollable-container-position`	Position property	`relative`
`--sws-scrollable-container-shadow-size`	Inner shadow size	`0.9375rem`
`--sws-scrollable-container-shadow-from-x`	Left inner shadow offset	`0`
`--sws-scrollable-container-shadow-from-y`	Top inner shadow offset	`0`
`--sws-scrollable-container-shadow-to-x`	Right inner shadow offset	`0`
`--sws-scrollable-container-shadow-to-y`	Bottom inner shadow offset	`0`
`--sws-scrollable-container-overscroll-behavior`	Main box overscroll-behavior	`auto`
`--sws-scrollable-container-notification-top`	Notification box top position	`3.125rem`
`--sws-scrollable-container-notification-left`	Notification box left position	`calc((100% - var(--sws-scrollable-container-notification-size)) / 2)`
`--sws-scrollable-container-notification-size`	Notification box width/height size	`6.25rem`
`--sws-scrollable-container-notification-padding`	Notification box padding	`0.75rem`
`--sws-scrollable-container-notification-gap`	Notification box flexbox gap size	`0.5rem`
`--sws-scrollable-container-notification-color`	Notification box text color	`#fff`
`--sws-scrollable-container-notification-background-color`	Notification box background color	`rgba(0, 0, 0, 0.5)`
`--sws-scrollable-container-notification-backdrop-filter`	Notification box backdrop filter	`blur(0.187rem)`
`--sws-scrollable-container-notification-box-shadow`	Notification box shadow	`0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.2)`
`--sws-scrollable-container-icon-scale`	Notification icon transform scale	`1.5`
`--sws-scrollable-container-message-font-size`	Notification message font size	`0.75rem`
`--sws-scrollable-container-message-line-height`	Notification message line height	`1.25`
`--sws-scrollable-container-message-white-space`	Notification message line white-space	`normal`

Options

<sws-scrollable-container
  label="scrollable"
  is-vertical="false"
  is-hide-notification="false"
>
  ... inner content ...
</sws-scrollable-container>