Chrome中的scrollTop有问题吗？

本文介绍了Chrome中的scrollTop有问题吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

代码如下所示：

  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 =containerstyle =height：600px; width：600px; overflow：auto; onscroll =updateCenter（）> 
< script> 
 var div = document.getElementById（'container'）; 
 $ b $ function updateCenter（）
 {
 svfdim.cx =（div.scrollLeft + parseFloat（div.style.width）/ 2）/ scalar; 
 svfdim.cy =（div.scrollTop + parseFloat（div.style.height）/ 2）/ scalar; 
} 
 
函数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>

解决方案

 < 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）/标量; （div.scrollTop！= prescrollTop）
 {
 svgdim.cy =（div.scrollTop + parseFloat（div.style.height）/ 2）/ scalar; 
 
 
} 
 
 prescrollLeft = div.scrollLeft; 
 prescrollTop = div.scrollTop; 
} 
 
函数updateScroll（svfdim，scalar，div）
 {
 div.scrollTop = svfdim.cy *标量 -  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 =containerstyle =height：600px; width：600px; overflow：auto; onscroll =updateCenter（）> 
 //一些SVG 
< / div>

这解决了我的问题。问题在于，因为我正在更改scrollLeft和scrollTop，所以onscroll会被调用两次。最初我写了这个意图使用scrollTo，它将在一次调用中完成两个滚动。我不太清楚为什么现在我的原始代码在FF / Opera中工作...

I am setting scrollTop and scrollLeft for a div that I am working with.

The code looks like this:

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

This works just fine in FF, but only scrollLeft works in chrome. As you can see, the two use almost identical equations and as it works in FF I am just wondering if this is a problem with Chrome?

Update: If I switch the order of the assignments then scrollTop will work and scrollLeft won't.

 <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>

解决方案

<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>

This fixed my problem. The problem was that onscroll is called twice since I am changing scrollLeft and scrollTop. Originally I wrote this with the intent to use scrollTo which would have done both scrolls in one call. I'm not quite sure why my original code worked in FF/Opera now...

这篇关于Chrome中的scrollTop有问题吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！