1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 17:40:29 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/widgets/ScrollableWidget.tid

49 lines
1.6 KiB
Plaintext

caption: scrollable
created: 20140324223413403
modified: 20220620115347910
tags: Widgets
title: ScrollableWidget
type: text/vnd.tiddlywiki
! 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 |
<$macrocall $name=".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
This example requires 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;
}
```
This wiki text shows how to display a list within the scrollable widget:
<<wikitext-example-without-html "<$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>
">>