Is there a problem with scrollTop in Chrome?_问答_开发者

Is there a problem with scrollTop in Chrome?

开发者 https://www.devze.com 2022-12-25 16:25 出处：网络

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;

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 assignm开发者_如何转开发ents 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...