This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

ScrollableWidget

 31st July 2023 at 10:09am

Introduction

The scrollable widget wraps its content in a scrollable frame. The user can scroll the contents with the mouse or with touch gestures. Code can use the WidgetMessage: tm-scroll to programmatically scroll specific DOM nodes into view.

Content and Attributes

The content of the <$scrollable> widget is displayed within a pair of wrapper DIVs. If the inner DIV is larger then it scrolls within the outer one. CSS is used to specify the size of the outer wrapper.

AttributeDescription
classThe CSS class(es) to be applied to the outer DIV
fallthroughSee below
bindNew in v5.3.2 Optional title of tiddler to which the scroll position should be bound

Binding the scroll position to a tiddler automatically copies the scroll coordinates into the scroll-left and scroll-top fields after scrolling occurs. Conversely, setting those field values will automatically cause the scrollable to scroll if it can.

Note
If a scrollable widget can't handle the tm-scroll message because the inner DIV fits within the outer DIV, then by default the message falls through to the parent widget. Setting the fallthrough attribute to no prevents this behaviour.

Examples

These examples require the following CSS definitions from $:/_tw5.com-styles:

.tc-scrollable-demo {
	border: 1px solid <<colour message-border>>;
	background-color: <<colour message-background>>;
	padding: 1em;
	height: 400px;
	position: relative;
}

Simple Usage

This wiki text shows how to display a list within the scrollable widget:

Binding scroll position to a tiddler

Current scroll position: ,