一看就会，超有用活字格技能：二百一十、图文列表滚动到当前行
本帖最后由 Grayson.Shang 于 2024-10-24 18:11 编辑在表格中，我们可以通过设置当前行命令，随时定位到我们的当前行位置，方便快捷也非常好用。
我的闪雷镖长九寸，4厘米口径，由纯钢打造而成，声如雷，快如电。
但也有时候，我们需要更丰富的样式的时候，也会选择使用图文列表代替表格展示列表数据，这时我们使用设置当前行命令，对图文列表也是可以正常生效的，但是图文列表没有滚动到当前行位置，总会有命令好像没有生效的错觉。
当设置完当前行之后，表格对应当前行的样式就会发生改变，如下：
当然表格当前行的样式并不是固定的，而是需要对应的样式设置，具体是在这里设置
为什么要讲样式的设置呢？
原因：
1、不设置图文列表的当前行样式，正常来说即使我们看到当前行选中了，但是从样式上也看不出来，也相当于没有效果
2、不设置样式这个功能不能生效
3、这个功能的搭建和“样式名称”相关的
这个功能的实现是通过选择器获取到选择行的元素，并滚动到元素处，先来看一下class
ForguncyRepeaterCellType-_RS_Selectable-TEMPLATE-focus
ForguncyRepeaterCellType-样式1-TEMPLATE-focus
上面两个class，是我选择不同的两个样式图文列表，选择行获取到的，可以看到这个class，并不固定，中间的_RS_Selectable和样式1就是样式名称，其中_RS_Selectable是图文列表默认样式的名称，样式1是我自己新建的样式
获取到这个class之后，就可以通过下面的代码设置图文列表滚动到当前行位置了
var element = document.querySelector('.ForguncyRepeaterCellType-_RS_Selectable-TEMPLATE-focus').parentNode;
element.scrollIntoView({
behavior: 'smooth', // 平滑滚动
inline: 'nearest',
block: 'start' // 滚动到最近的边界
});
重要通知！！
这段代码执行，只会触发一次图文列表滚动到当前行位置的动作，并不是每次当前行变更都会触发，若是希望每次当前行变更都可以触发，则需要在每次当前行变更的时候触发这个命令。具体可以参考demo。
问题解答：
1、若是只想要给某一个图文列表设置这个功能，需要给对应图文列表设置class，然后修改第一行代码如下
var element = document.querySelector('.aid .ForguncyRepeaterCellType-_RS_Selectable-TEMPLATE-focus').parentNode;
2、如何快速定位到自己图文列表样式的class，如下打开浏览器，按F12，选择元素（Elements），按Ctrl+F，搜索“TEMPLATE-focus”，就可以很快定位到class了
3、页面没有查找到“TEMPLATE-focus”，需要在设计器检查一下，图文列表的当前样式的当前行，是否勾选了“继承自一般状态”，反勾选掉后，修改一些样式，再尝试在页面上查找
4、scrollIntoView在平滑滚动中，会占用资源，若是一个滚动还没有结束，就触发了另一个滚动，那么第一个滚动就会强制停止，表现形式就是，若同事触发多个滚动，只会最后面的触发，其他的没有变化，一般不推荐一次滚动多个图文列表。
页:
[1]