Chrome中的scrollTop有问题吗？答案

【问题标题】：Is there a problem with scrollTop in Chrome?Chrome中的scrollTop有问题吗？
【发布时间】：2010-03-30 22:11:19
【问题描述】：

我正在为我正在使用的 div 设置 scrollTop 和 scrollLeft。

代码如下：

div.scrollLeft = content.cx*scalar - parseInt(div.style.width)/2;
div.scrollTop = content.cy*scalar - parseInt(div.style.height)/2;

这在 FF 中工作得很好，但只有 scrollLeft 在 chrome 中工作。如您所见，两者使用几乎相同的方程式，并且它在 FF 中有效，我只是想知道这是否是 Chrome 的问题？

更新： 如果我切换分配的顺序，那么 scrollTop 会起作用，而 scrollLeft 不会。

 <div id="container" style = "height:600px; width:600px; overflow:auto;" onscroll = "updateCenter()">
<script>
    var div = document.getElementById('container');

    function updateCenter()
    {
        svfdim.cx = (div.scrollLeft + parseFloat(div.style.width)/2)/scalar;
        svfdim.cy = (div.scrollTop + parseFloat(div.style.height)/2)/scalar;
    }

    function updateScroll(svfdim, scalar, div)
    {
        div.scrollTop = svgdim.cy*scalar - parseFloat(div.style.height)/2;  
        div.scrollLeft = svgdim.cx*scalar - parseFloat(div.style.width)/2;
    }

    function resizeSVG(Root)
    {
        Root.setAttribute("height", svfdim.height*scalar);
        Root.setAttribute("width", svfdim.width*scalar);    
        updateScroll(svgdim, scalar, div);
    }
</script>

【问题讨论】：

如果在修改 div 的属性之前将 4 个维度存储在变量中会怎样？
您发布的两行看起来不错。包括 html 和更多你正在使用的脚本。
通过一些调试，我想我知道是什么导致了问题，但我不知道如何解决它。当 FF 和 Opera 调用 updateCenter() 时，div.scrollLeft/Top 具有正确的值作为已经执行的滚动。在 Safari/Chrome 中，调用时它们仍然为零（正文加载）

标签： javascript google-chrome

【解决方案1】：

<body onload="resizeSVG(Root)" background="gray">
<script>
var prescrollLeft = 0;
var prescrollTop = 0;

function updateCenter()
{   
    if(div.scrollLeft != prescrollLeft)
    {
        svgdim.cx = (div.scrollLeft + parseFloat(div.style.width)/2)/scalar;
    }
    if(div.scrollTop != prescrollTop)
    {
    svgdim.cy = (div.scrollTop + parseFloat(div.style.height)/2)/scalar;
    }

    prescrollLeft = div.scrollLeft;
    prescrollTop = div.scrollTop;
}

function updateScroll(svfdim, scalar, div)
{
    div.scrollTop = svfdim.cy*scalar - parseFloat(div.style.height)/2;  
    div.scrollLeft = svfdim.cx*scalar - parseFloat(div.style.width)/2;
}

function resizeSVG(Root)
{
    Root.setAttribute("height", svfdim.height*scalar);
    Root.setAttribute("width", svfdim.width*scalar);    
    updateScroll(svfdim, scalar, div);
}
</script>

<div id="container" style = "height:600px; width:600px; overflow:auto;" onscroll = "updateCenter()" >
//some SVG
</div>

这解决了我的问题。问题是 onscroll 被调用了两次，因为我正在更改 scrollLeft 和 scrollTop。最初我写这篇文章的目的是使用 scrollTo ，它可以在一次调用中完成两个滚动。我不太清楚为什么我的原始代码现在可以在 FF/Opera 中运行...

【讨论】：