工具-条目内滚动翻页

[dyp1121054136]

附件下载：
（右键-链接另存为）

工具-条目内滚动翻页（含JavaScript需保存刷新生效）（新增css类名锚点偏移量）.json

工具-条目内可跳转书签（含JavaScript需保存刷新生效）（替换滚动动作为tm-scrollpage）.json

工具-正则表达式查找替换（含JavaScript需保存刷新生效）（替换滚动动作为tm-scrollpage）.json

[dyp1121054136]

手机端容器.tc-scrollpage高度设置为70vh，上下滚动也设置为70vh，额外滚动行数0
scrollDistance="70vh" extraLines="0"

电脑端容器.tc-scrollpage高度设置为71vh，上下滚动设置为70vh，额外滚动行数1
scrollDistance="70vh" extraLines="1"

[dyp1121054136]

[dyp1121054136]

经测试，关于级联中的

\whitespace trim
<div class="tc-scrollpage"><$transclude><$transclude tiddler="$:/language/MissingTiddler/Hint"/></$transclude></div>

默认为行间样式，原文的块级元素，如用wikitext写的小标题将无法正常渲染，换行空行也会被清除，可以给tc-tiddler-body添加额外的硬式换行样式css；

如果改为块级模式：

\whitespace trim
<div class="tc-scrollpage"><$transclude mode="block"><$transclude tiddler="$:/language/MissingTiddler/Hint"/></$transclude></div>

原文的块级元素能正常渲染，但是会影响翻页效果，最顶部和最底部字符会被截断。

[dyp1121054136]

进阶用法-跳转到可滚动容器内css类名位置，代码参考：

<$list filter="[<currentTiddler>!has:field[scrollpage]]">
<$action-sendmessage $message="tm-scrollpage" targetElement="css类名" scrollTime="0"/>
</$list>

<$list filter="[<currentTiddler>field:scrollpage[yes]]">
<$action-sendmessage $message="tm-scrollpage" scrollContainerSelector=".tc-scrollpage" targetElement="css类名" scrollTime="0"/>
</$list>