一看就会，超有用活字格技能：二百一十、图文列表滚动到当前行

收藏 · 2024-10-24 17:46 上传

本帖最后由 Grayson.Shang 于 2024-10-24 18:11 编辑

在表格中，我们可以通过设置当前行命令，随时定位到我们的当前行位置，方便快捷也非常好用。

我的闪雷镖长九寸，4厘米口径，由纯钢打造而成，声如雷，快如电。

但也有时候，我们需要更丰富的样式的时候，也会选择使用图文列表代替表格展示列表数据，这时我们使用设置当前行命令，对图文列表也是可以正常生效的，但是图文列表没有滚动到当前行位置，总会有命令好像没有生效的错觉。

当设置完当前行之后，表格对应当前行的样式就会发生改变，如下：
image.png297078246.png

当然表格当前行的样式并不是固定的，而是需要对应的样式设置，具体是在这里设置
image.png110909422.png

为什么要讲样式的设置呢？
原因：
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了
image.png393274535.png

3、页面没有查找到“TEMPLATE-focus”，需要在设计器检查一下，图文列表的当前样式的当前行，是否勾选了“继承自一般状态”，反勾选掉后，修改一些样式，再尝试在页面上查找
image.png584760741.png

4、scrollIntoView在平滑滚动中，会占用资源，若是一个滚动还没有结束，就触发了另一个滚动，那么第一个滚动就会强制停止，表现形式就是，若同事触发多个滚动，只会最后面的触发，其他的没有变化，一般不推荐一次滚动多个图文列表。

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：二百一十、图文列表滚动到当前行

0 个回复

Wyn高级认证

Wyn认证

活字格认证

活字格高级认证