handy-scroll

Introductory remarks

This web page contains a few examples of use of the handy-scroll web component. handy-scroll is a dependency-free web component which can be used to solve the problem of scrolling lengthy containers horizontally when those containers don’t fit into the viewport. The component is just a scrollbar which is attached at the bottom of the container’s visible area. It doesn’t get out of sight when the page is scrolled, thereby making horizontal scrolling of the container much handier.

If you are looking for a guide on the component usage and API, please check out this README on GitHub.

#1: Handscrolls

Description

Using of the handy-scroll web component can be appropriate for online exhibiting of large handscrolls.

The demo below shows a use case for the API method update(). Click the “tabs” to switch over the paintings, and the component parameters will update accordingly (note that handscrolls are viewed starting from the right end).

Live demo

Qingming Shanghe Tu │ Nine Dragons │ Kangxi Emperor’s Southern Inspection Tour

Demo’s code

See the Pen handy-scroll: demo #1 by Amphiluke (@amphiluke) on CodePen.

#2: handy-scroll in a popup

Description

This example demonstrates a special use case — a component inside a positioned popup serving as a custom viewport element. Please find out the details of this use case in the component’s docs.

Live demo

Click here to open a popup

“Along the River During the Qingming Festival”

“Along the River During the Qingming Festival” (fragment), painting by Zhang Zeduan (12th century)

Demo’s code

See the Pen handy-scroll: demo #2 by Amphiluke (@amphiluke) on CodePen.