Question

我使用的技术是在div中有一个表，以限制表所覆盖的空间并滚动。表格中有复选框。这些复选框会影响表的呈现方式。单击一个时，表将在div中重新呈现。这总是会导致滚动条返回顶部，这很烦人。所以在我用javascript渲染表之后，我执行了一个setTimeout调用来异步调用一个函数，该函数将scrollTop值设置回重新渲染之前的位置。这是有问题的代码片段：

注意：（ge（）== geMaybe（）== document.getElementById（））

o.renderAndScroll = function() {
    var eTestSection = geMaybe(o.id + '-testSection');
    var scrollTop = 0;
    if (eTestSection) {
        scrollTop = eTestSection.scrollTop;
    }

    o.render();

    if (eTestSection) {
       setTimeout(
           function() { 
               console.log('Scrolling from ' + ge(o.id).scrollTop + ' to ' + scrollTop);
               ge(o.id).scrollTop = scrollTop;
               console.log('Scrolled to ' + ge(o.id).scrollTop);
          }, 
          1000);
    }            
}

每次更改复选框状态时，我的控制台日志输出都是这样：

Scrolling from 0 to 1357
Scrolled to 0

任何其他方式使这项工作？请注意，我将超时设置为一整秒，以确保在调用滚动代码时将渲染移动到DOM。我主要使用chrome，但最终需要它才能跨浏览器工作。我不使用jQuery。如果我尝试在调试器中捕获onscroll事件，甚至从onscroll处理程序记录内容，则当使用鼠标移动滚动条时，chrome调试器会崩溃。

Answer 1

正确的代码是：

o.renderAndScroll = function(fForce) {
        var scrollTop = 0;
        var eTestSection = geMaybe(o.id + '-testSection');
        if (eTestSection) {
            scrollTop = eTestSection.scrollTop;
        }
        o.render(fForce);
        setTimeout(
            function() {
                // re-lookup element after being rendered
                var eNewTestSection = ge(o.id + '-testSection');
                eNewTestSection.scrollTop = scrollTop;
            },
            1);
    };

javascript scrollTop似乎不起作用

1 个答案: