我在寻找可能的原因而不是解决办法。考虑到我的情况,我不知道这种形式是否被允许,但我真的不知道这种行为的原因,也不知道是否有一个答案(可能没有)。
我对scrollintoview函数有个奇怪的问题。此函数使用div元素的id引用另一个元素中的另一个div来模拟索引。我只使用javascript来完成这个任务,并在以下浏览器中进行了测试(所有浏览器都是最新版本):firefox(dev和regular)、googlechrome、midori、vivaldi、edge(chromium)和opera。它在所有这些浏览器中都以预期的方式工作,选项在基于chromium的浏览器中不起作用。
昨天,我推出了一些修改来呈现给客户。一位大四学生在测试代码时注意到scrollintoview在他的机器中不起作用(使用最新的chrome)。我们仔细检查了相同的代码,没有发现任何不同。我请一位前端高级人员看了看,过了一会儿他说没问题,但对他来说也不管用(同样是最新的chrome)。我们没时间看了,因为我们得去开会。无论如何,会议期间发生了最后一件奇怪的事情:我没有显示索引,但是使用scrollintoview的其他函数在客户机的chrome中使用了平滑的行为(一些googlechrome)。找不到确切的版本)。
因此,它可以在我的浏览器中工作,而不是在我的高级浏览器中,但它也可以在客户端中工作。
我正试图弄清楚,既然我们规范了浏览器、操作系统和工具的版本,这会发生什么。代码也很简单,老实说,我不认为这是一个软件版本的问题。另外,虽然我们的客户端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)。
我正在使用windows10pro(1904)、spring上的java+zk和一系列浏览器。我考虑过的解决方案是尝试使用jquery的scrolltop或从服务器调用函数,但我还是在寻找我的js只在某些机器上工作的原因。
任何帮助都将不胜感激。节日快乐。
1条答案
按热度按时间5vf7fwbs1#
一个猜测:因为您正在与zk合作,在客户端可能会出现计时/赛车问题。。。zk有部分定时/延迟的函数来呈现/调整客户端小部件的大小。因此,即使可以检索dom节点,也并不总是意味着它的容器已经完成了大小调整。因此,在调用scroll into view函数时,其中一个容器可能还没有滚动条。
一种调试方法:chrome/-ium有很好的调试工具来处理这样的场景:特别是如果你不确定某个函数何时被调用与其他函数/布局/css/网络操作相关,那么profiler会很有帮助。
打开开发工具
切换到“性能”选项卡
单击“录制”(左上角圆形图标)
在浏览器中执行导致问题的操作
单击“停止”(与“录制”按钮相同)
现在你会得到很多信息
您将得到一个包含浏览器窗口内容缩略图的时间线。下面是网络活动,再往下是一个名为“主”的火焰图。
在flame图表中,您可以搜索方法名(ctrl-f)并查看其位置。更重要的是看看周围发生了什么(之前/之后)
在电脑上做同样的工作,并比较结果。。。也许您会发现调用函数和其他函数的顺序有所不同。
这可以帮助你提出一个更具体的问题。