滚动进度条

注意：这是本网站使用的组件页面

组件页面一般通过[[include]]方式使用。

请不要随意编辑此页面以免造成不必要的崩溃。

如果你需要报告错误，请前往页面讨论区。

评分: +1+–x

警告：你使用的浏览器似乎不支持此组件。

这意味着你无法得到此组件的正确效果，请不要在当前浏览环境下使用此组件。
如果你希望使用此组件，请按照以下的说明更新你的浏览器。

attention.svg

此组件可能会引起性能问题
此组件使用的函数会引起网页回流及重绘，它们可能给浏览器带来过重的负担造成页面卡顿。
在通常情况下不会如此，如果需要，您可以放心使用。

availability.svg

此组件的兼容性存在问题
令此组件生效所要求的浏览器及其最低版本为：Edge 115、Chrome 115、Opera 101，目前所有版本的 Firefox 以及 Safari 浏览器均不支持此组件。如需使用此组件，请自行承担由于其他用户的浏览器不支持对应效果导致阅读体验变差的风险。

availability.svg

此组件当前存在跨站点限制
当前，此组件基于明日方舟同人中文站的默认主题系列（Terrae）开发。现阶段若在本站与沙盒站之外的站点引用，你需要按照下文进行额外的配置。

update.svg

此组件允许高度自定义
源代码已经在末尾提供，若模板提供的参数无法提供预期效果，你可以自行搭建。

开发者信息

此组件由SenioriouscSenioriousc于2024年2月1日开发。

参数信息与说明

  • 允许使用所有颜色格式。
  • 数值只能使用px/rem类型，包括单位。
  • <terminal-picture>必须为svg类型图片的链接或者URL转码结果1。
  • 若你使用的是Terrae的主题，即使部分参数不填写，进度条也可以正常显示；如果你的页面使用了此外的主题，你需要填入所有的数值型参数，并且在页面顶部加入如下代码：
[[module CSS]]
:root {
    --banner-width: <length>; /* 滚动可视区域距离视窗顶部的距离 */
}
[[/module]]
  • 当您不填写某些参数时，组件会使用默认值。所有的默认参数如下：

[[include :arknights:component:scroll-progress-base
…
|max-length=60
|bar-width=6px
|color-stop-1=var(--hightlight-secondary-color)
|color-stop-2=var(--hightlight-primary-color) //变量仅在Terrae系列主题下生效。
|terminal-picture=见下文图
|terminal-size=2rem

完整参数列表

[[include :arknights:component:scroll-progress-base |$default-type=--] 非必需，选择默认类型
|direction=Vertical/Horizontal 选择进度条显示的方向，前者为垂直方向，后者为水平方向
|function=symmetric/terminal 选择进度条的显示函数，前者从中间对称展开/消去，后者从端点处展开/消去
|trend=forward/reverse 非必需，仅用于端点型进度条。选择起始/结束端点，前者将应用左（下）端点，后者将应用右（上）端点
|method=fade/null 非必需，选择进度条初始状态，若填写，则进度条初始显示为100%并不断下降
|max-length=<percentage> 必填。填写进度条满时占页面宽/高的百分比，仅填写数字，推荐值为40-80
|bar-width=<length> 必填。填写进度条的宽度，推荐值为4px-12px
|color-stop-1=<color> 填写进度条一侧端点的颜色/页面初始处的颜色
|color-stop-2=<color> 填写进度条另外一端的颜色/页面最终处的颜色，如果需要纯色进度条，请保持与上一个值一致
|terminal-picture=<URL> 非必需，仅用于对称型进度条。自定义端点图片，如需去掉端点图片请留空。
|terminal-size=<length> 非必需，仅用于对称型进度条，自定义端点图片大小，实际显示大小为所填值的√2/2倍
]]

预设图片
预设图片
端点预设图片。
由SenioriouscSenioriousc绘制。

组件适配

该组件和 直达快捷键组件 特别适配！
尝试一下！

使用方法

普通类型

  • 组件一共提供了十二类基础的滚动条样式，根据前四个参数（<direction><function><trend><method>）组合得到，建议自行在沙盒中测试使用，此处限于篇幅不展示demo。请留意完整参数列表中的说明和必要性，如果遇到问题，请询问开发者。
  • 一个页面中可以同时使用多个不同的进度条！但是你无法分别设定它们的长度与大小，最终显示的大小决定于你在最后一个[[include]]中填入的数值2。例如：

在页面中使用：

[[include :arknights:component:scroll-progress-base
|direction=Horizontal
|function=symmetric
|method=fade
|max-length=90
|bar-width=12px
|terminal-size=3rem
]]

[[include :arknights:component:scroll-progress-base
|direction=Vertical
|function=symmetric
|method=fade
|max-length=60
|bar-width=6px
|terminal-size=1.5rem
]]


你最终会得到两个分别在垂直方向和水平方向的、最大显示长度为滚动区域的60%，宽度6px，端点图片大小为1.5rem的进度条，颜色是预设的颜色（如果是在不使用Terrae主题的站点则不会显示）。

特殊类型

此外，组件额外提供一个特别的类型，该类型不支持自定义，通过如下代码使用：

[[include :arknights:component:scroll-progress-base |arcaea-type=--]
]]

此部分可能会更新，即更多的特别类型进度条。

自定义说明

由于参数传递的限制，仅通过[[include]]可能无法调整出令你满意的进度条。因此本组件开源，并允许你高度自定义进度条。你可以在下方查看组件对应的所有源代码。（不包括参数传递和层叠部分）

  • 本组件需要你在页面中添加空的CSS实体以显示进度条。
  • 本组件的动画函数部分（即/* Functions */一节）已经采用完备的参数计算使得端点图片始终和进度条精确对齐，你最好不要改动关于translate的部分并始终保持其为从左往右的第一个transform函数，否则你最后可能需要使用近似值替代原有的计算函数。如果你希望加上端点图片的旋转或者缩放，只需要在translate之后加上rotate或者scale函数。
  • 滚动条被包裹在滚动区域中，请通过调整滚动区域（.u-VerticalScroll_Area和.u-HorizontalScroll_Area）的CSS声明来修改滚动条的位置，最好不要直接改动滚动条（.u-Progress_Line.*.*.*）的位置属性。
+ 点击展示源代码
Footnotes
模板
除非特别注明，本站内容采用 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 协议授权。