JS 功能适用于所有浏览器，但不适用于所有机器

Question

我正在寻找可能的原因而不是解决方案。鉴于我的情况，我不知道是否允许这种格式，但老实说，我对 werid-ish 行为的原因一无所知， 不知道是否有一个答案这个（可能不是）。

我在使用 scrollIntoView 函数时遇到了一个奇怪的问题。这个函数使用一个div元素的id来引用另一个元素中的另一个div来模拟一个索引。我只使用 Java 脚本来执行此操作，并在以下浏览器中进行了测试（所有浏览器均达到最新版本）：Firefox（Dev 和常规）、Google Chrome、Midori、Vivaldi , Edge (Chromium) 和 Opera。它以预期的方式在所有这些中工作，但选项在基于 Chromium 的浏览器中不起作用。

现在，昨天我推出了一些更改以呈现给客户。一位大四学生在测试代码时注意到 scrollIntoView 在他的机器上不起作用（使用最新 Chrome）。我们仔细检查我们有相同的代码，没有发现任何不同。我让一位 front-end 的前辈看了一下，过了一会儿他说没问题，但对他来说也不起作用（同样，最新的 Chrome）。我们没有更多时间看它，因为我们必须去开会。无论如何，会议期间发生了最后一件奇怪的事情：我没有显示索引，但是使用 scrollIntoView 的其他功能在客户端机器中 Chrome 中的平滑行为（一些 Google Chrome。无法查找确切的版本）。

因此，它可以在我的浏览器中使用，但不能在我的高级浏览器中使用，但它也可以在客户的浏览器中使用。

自从我们对浏览器、操作系统和工具版本进行标准化后，我正试图弄清楚这可能是怎么回事。代码也非常简单，老实说我不认为软件版本有问题。此外，虽然我们客户的 Chrome 中的平滑滚动很奇怪，但我认为这只是他们的机器出于某种原因打开了该标志，但在那里工作的其他功能告诉我 scrollIntoView 本身并不是真正的问题（有点） .

我的功能（没用）

function navi(id, ns){ 
    var elem = $('$' + id)[0];
    var indice = zk.$('$indice').$n('real');
    elem.scrollIntoView({behavior: "smooth"});
    indice.placeholder = ns;
}

有效的函数

function getDivInvol(id){
    var elem = zk.$('$d' + id).$n();
        estiloActual = elem.className;
        eBound = elem.getBoundingClientRect();
        pBound = zk.$('$listenerD').$n().getBoundingClientRect();
    elem.className = 'ridgeSelect ' + estiloActual;
        if(eBound.bottom >= pBound.bottom || eBound.top <= pBound.top){
            elem.scrollIntoView({behavior: "instant", block: "center"});            
        }
}
function rGetDivInvol(id){
    var div = '$i' + id;
        elem = zk.$(div).$n();
        eBound = elem.getBoundingClientRect();
        pBound = zk.$('$listenerI').$n().getBoundingClientRect();
    if(eBound.bottom >= pBound.bottom || eBound.top <= pBound.top){
            elem.scrollIntoView({block: "center"});         
        }
    $(div).effect("highlight", {color: "#7dc0ff"}, 1500);
}

我可以调查什么来确定这种行为？我无权访问其他计算机，出于安全原因，我真的不想在另一台计算机上设置我的环境。脚本本身似乎没问题，不需要从服务器调用函数（我可以尝试但无法测试，所以我想坚持使用JS）。

我正在研究 Windows 10 Pro(1904)、Java + Zk Spring 和一系列浏览器。我考虑过的解决方案是尝试使用 JQuery 的 scrollTop 或从服务器调用函数，但同样，我正在寻找我的 JS 仅在某些机器上工作的原因。

如有任何帮助，我们将不胜感激。节日快乐。

Answer 1

一个猜测：由于您使用的是 ZK，客户端可能会出现 timing/racing 问题……ZK 在客户端对 render/resize 小部件具有部分 timed/delayed 功能。因此，即使可以检索 DOM 节点，也并不总是意味着它的容器已完成大小调整。因此，当您调用滚动到视图功能时，其中一个容器可能还没有滚动条。

一种调试方法： Chrome/-ium 有针对此类场景的出色调试工具：如果您不确定何时调用与其他 functions/layout/css/network 操作相关的函数，分析器尤其有用。

打开开发工具
切换到性能选项卡
点击“录制”（左上角圆形图标）
在浏览器中执行导致问题的操作
单击“停止”（与“录制”按钮相同）
现在您将获得大量信息

您将获得包含浏览器 window 内容缩略图的时间线。下面是网络 activity，再往下是名为“Main”的火焰图。

在火焰图中，您可以搜索您的方法名称 (CTRL-F) 并查看它在哪里。更重要的是看看它周围发生了什么（之前/之后）

在它工作的 PC 上执行相同的操作，并比较结果...也许您会发现您的函数和其他函数的调用顺序有所不同。

这可以帮助您 POST 一个更具体的问题。

JS 功能适用于所有浏览器，但不适用于所有机器

JS function works in all browsers but not all machines

javascript

java

zk