作者 主题: 【issue】关于TOC的若干问题  (阅读 451 次)

0 会员 以及 1 访客 正在阅读本主题.

nikoqw

  • 幼年面包
  • *
  • 帖子: 8
  • 评价: +0/-0
  • nimshab MiGa-PaKHa GuMaYang!
    • 查看个人资料
【issue】关于TOC的若干问题
« 于: 七月 12, 2022, 12:08:37 下午 »
一、给TOC收起加上动画
建议给TOC因页面向下滚动自动收起的时候加一个动画。就像TOC自动展开的动画一样。
要不看起来太突然了。给人感觉排版一下子变了,又不知道变在哪里。

二、编写一个语法,为装饰用大图用。使之在TOC展开时不被往下推
现在有一个问题,如果页面的开头有大图片会导致。见https://acwiki.xyz/doku.php?id=ac%E4%BA%BA%E7%89%A9:acfun%E8%99%9A%E6%8B%9F%E5%81%B6%E5%83%8F:%E7%AB%BE%E9%A2%9C%E9%9F%B3&rev=1656986392。打开这个页面之后,整个文章的内容就被展开的TOC顶下去!当向下滑鼠标滑轮,TOC收起。这时再展开TOC,TOC便不会将文章的内容顶下去。
这是为什么呢?我看了一下。应该是这样的:
打开这个页面之后,整个文章的内容就被展开的TOC顶下去——是因为当用户滚动到页面最上方的时候TOC会变成relative定位。这时候图片、文字都被当做“内容”处理。浮动元素不能与“内容”重叠。而页面的宽度减去TOC的宽度不足以容纳“内容”,所以“内容”会被向下推,直到有足够的宽度容纳它。
当向下滑鼠标滑轮,TOC收起。这时再展开TOC,TOC便不会将文章的内容顶下去——是因为TOC变成了fixed定位,能与任何东西重叠。

这个“TOC展开之后将会与展开之后的TOC重合的内容都向下推”的逻辑实际上是有问题的。如果是文字的话,那么TOC展开后将会与他重叠的文字推到下一行是正确的(见https://acwiki.xyz/doku.php?id=ac%E4%BA%BA%E7%89%A9:acfun%E8%99%9A%E6%8B%9F%E5%81%B6%E5%83%8F:%E7%BB%9B%E7%B4%AB%E9%95%BF%E9%85%B1%E7%B4%AB%E7%9A%84%E7%BB%9B%E7%B4%AB。来回滚动鼠标滚轮看TOC展开后文字排版的变化(注意看“每周三周五更新科普视频《原来是绛紫》与其花絮”部分)),但如果是一个大的装饰用图片,我们不希望他会因为TOC的展开而作出大小或位置的变动。我们希望他就呆在原地不变(因为反正只要向下一滚动TOC就自动收起来了)。

解决的办法是为这种装饰用大图编写一个syntax。让这种装饰用大图不再是img元素,而是有background-image的div元素。

ps. 颜音的页面的这个问题让我暂时用一个方法解决了,就是将那个大图变小。当然这只是临时能用而已,在滚动到页面最上方TOC自动展开时,图片的位置还会移动,看起来非常不对劲。这个问题仍然需要解决。




总地来说,我以上说的两个问题都是一个缘由——TOC的展开与收起给用户带来了意料之外的页面排版变更。
« 最后编辑时间: 七月 12, 2022, 12:11:33 下午 作者 nikoqw »
豈曰無衣?與子同袍。王于興師、修我戈茅、與子同仇。

A135

  • A135级的周年全能面包
  • 银白面包
  • ****
  • 帖子: 527
  • 评价: +8/-0
    • 查看个人资料
Re: 【issue】关于TOC的若干问题
« 回复 #1 于: 七月 12, 2022, 04:10:13 下午 »
图太大了,缩成两三百像素比较合适(或者放在 infobox 里也行)

目录框现在调整为手动折叠/展开