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.
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
Macros: Brackets Core Macros Custom Widgets Functions Macro Calls Macro Definitions Macro Parameter Handling Macro Pitfalls Pragma: \define Procedures substitute Operator Substituted Attribute Values Transclusion Transclusion and Substitution Variables
Variables: Core Variables Custom Widgets Filter Operators Filters Functions ImportVariablesWidget Macro Definitions Macro Parameter Handling Macros Procedures Variable Usage Widgets
SystemTags:
Widgets: HTML in WikiText Widgets in WikiText WikiText
Filters: $:/AdvancedSearch CountWidget ListWidget TiddlyWiki Title Selection Transclusion in WikiText
Messages: Widgets
Commands: Using TiddlyWiki on Node.js
Mechanisms: TiddlyWiki
Developers: TiddlyWiki
Custom Widgets: JavaScript Pragma: \whitespace Pragma: \widget Procedures Variables
Functions: Filter Expression function Operator Pragma: \function Variables
Procedures: Brackets Pragma: \procedure Procedure Calls Procedure Definitions Procedure Parameter Handling Procedure Syntax Transclusion Variables
Binding scroll position to a tiddler
<$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>
That renders as:
Concepts: TiddlyWiki
Definitions: Concepts TiddlyWiki
WikiText: Editor toolbar Formatting in WikiText Formatting text in TiddlyWiki Markdown
Macros: Brackets Core Macros Custom Widgets Functions Macro Calls Macro Definitions Macro Parameter Handling Macro Pitfalls Pragma: \define Procedures substitute Operator Substituted Attribute Values Transclusion Transclusion and Substitution Variables
Variables: Core Variables Custom Widgets Filter Operators Filters Functions ImportVariablesWidget Macro Definitions Macro Parameter Handling Macros Procedures Variable Usage Widgets
SystemTags:
Widgets: HTML in WikiText Widgets in WikiText WikiText
Filters: $:/AdvancedSearch CountWidget ListWidget TiddlyWiki Title Selection Transclusion in WikiText
Messages: Widgets
Commands: Using TiddlyWiki on Node.js
Mechanisms: TiddlyWiki
Developers: TiddlyWiki
Custom Widgets: JavaScript Pragma: \whitespace Pragma: \widget Procedures Variables
Functions: Filter Expression function Operator Pragma: \function Variables
Procedures: Brackets Pragma: \procedure Procedure Calls Procedure Definitions Procedure Parameter Handling Procedure Syntax Transclusion Variables