Question

我有一个内容很多的div元素：

<div id="x" class="unhidden">
    text and more divs
</div>

CSS类'unhidden'包含：

display: block;

当我点击链接时，元素id ='x'通过javascript变为class ='hidden'，其中包含：

display: none;

div元素现在已隐藏。到现在为止还挺好。现在我想返回并显示完整的div='x'并向下滚动到div id='x'中的某个div。

所以当我点击后退按钮时，首先通过javascript再次成为unhidden类，然后我在同一个函数中运行此脚本：

window.scroll(0, findPos(document.getElementById(GoTo)));

GoTo是我要向下滚动到的某个div的ID。使用此功能向下滚动：

function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
       do {
            curtop += obj.offsetTop;
       } while (obj = obj.offsetParent);

       return [curtop];
   }
}

脚本确实找到了去往的位置，但没有向下滚动。

如果它与隐藏/未隐藏的部分分开，则向下滚动脚本也可以使用。但在这里它不起作用，隐藏/显示部分阻止了一些东西。

任何解决方案或想法？

Answer 1

我认为这是因为浏览器在将控制权交还给渲染引擎之前首先执行所有JS代码 - 所以更改类实际上并没有使元素在您的代码计算时再次显示元素位置被执行（未显示的元素没有任何位置）。

如果将整个window.scroll调用包装到一个匿名函数中，并使用setTimeout以最小延迟执行该调用，则应该可以解决问题：

referenceToDivElement.className = "unhidden";
var targetElement = document.getElementById(GoTo);
window.setTimeout(function() {
  window.scroll(0, findPos(targetElement));
}, 5);

JS：在“取消隐藏”div元素后向下滚动

1 个答案: