#1 - 2020-11-5 14:38
Cedar (。´-д-)
现在的slidebar的sticky状态好像是用JS配合CSS实现的, 问题多多..
比如如果主楼有图片而且图片加载速度太慢(或者用了我的折叠组件)的话, 就会导致sliderbar在错误的位置变成sticky状态..
而且变成sticky状态的瞬间, 评论区会因为缺了这个元素立刻上移..
其实现在用CSS很容易就能实现这个效果, 只要加上就可以了..甚至不需要用JS监听事件..
=========
目前想到两种打补丁的方法:
1. 跑一下 $(window).off('scroll'); 去掉监听事件, 然后加样式.
不过这个监听添加的时间好像很晚, 好像要等#sliderContainer出现后才能去掉..可能还要配合MutationObserver之类的..有点麻烦..
2. 直接修改CSS, 加上上面提到的样式后,
给 #sliderContainer.sticky 加上一个优先级更高的CSS,
覆盖掉原来的 position: fixed; 效果..
这样相当于让事件失效..
虽然简单, 但是就真的是"补丁"操作了..
所以还是让sai老板改改代码比较好..
比如如果主楼有图片而且图片加载速度太慢(或者用了我的折叠组件)的话, 就会导致sliderbar在错误的位置变成sticky状态..
而且变成sticky状态的瞬间, 评论区会因为缺了这个元素立刻上移..
其实现在用CSS很容易就能实现这个效果, 只要加上
#sliderContainer {
position: -webkit-sticky;
position: sticky;
top: 0;
}
=========
目前想到两种打补丁的方法:
1. 跑一下 $(window).off('scroll'); 去掉监听事件, 然后加样式.
不过这个监听添加的时间好像很晚, 好像要等#sliderContainer出现后才能去掉..可能还要配合MutationObserver之类的..有点麻烦..
2. 直接修改CSS, 加上上面提到的样式后,
给 #sliderContainer.sticky 加上一个优先级更高的CSS,
覆盖掉原来的 position: fixed; 效果..
这样相当于让事件失效..
虽然简单, 但是就真的是"补丁"操作了..
所以还是让sai老板改改代码比较好..
奇偶数楼层用 :nth-child(odd) 或者 :nth-child(even) 就能区分了..没想到bangumi的实现方式竟然不是这样的..
说明多级列表的样式是故意被设置成none的..
往坏了想是sai老板不想加这个功能..
往好了想是当年偷懒了, 没专门适配用户评论..
或者打算将来直接更新一个功能更完整的BBCode..(但是先鸽个5年再说