ScrollableWidget

2023년 7월 31일 오전 10:09

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.

Attribute	Description
class	The CSS class(es) to be applied to the outer DIV
fallthrough	See below
bind	New 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:

<$scrollable class='tc-scrollable-demo'>
<$list filter='[tag[Reference]]'>

<$view field='title'/>: <$list filter='[all[current]links[]sort[title]]' storyview='pop'>
<$link><$view field='title'/></$link>
</$list>

</$list>
</$scrollable>

That renders as:

Concepts: TiddlyWiki

Definitions: Concepts TiddlyWiki

WikiText: Editor toolbar Formatting in WikiText Formatting text in TiddlyWiki Markdown

SystemTags:

Filters: $:/AdvancedSearch CountWidget ListWidget TiddlyWiki Title Selection Transclusion in WikiText

Commands: Using TiddlyWiki on Node.js

Mechanisms: TiddlyWiki

Developers: TiddlyWiki

Core Classes: $:/ControlPanel Utility Classes

Core Functions: Functions

Core Macros: Macros

Core Messages:

Core Procedures: Procedures

Core Variables: Variables

Core Widgets:

Binding scroll position to a tiddler

Current scroll position: ,

<$scrollable class='tc-scrollable-demo' bind='$:/my-scroll-position'>
<$list filter='[tag[Reference]]'>

<$view field='title'/>: <$list filter='[all[current]links[]sort[title]]' storyview='pop'>
<$link><$view field='title'/></$link>
</$list>

</$list>
</$scrollable>