0

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>
Shaunwithanau
  • 575
  • 5
  • 13
  • What happens if your store the 4 dimensions in variables before modifying div's properties? – Alsciende Mar 30 '10 at 13:01
  • the two lines you posted seem fine. include html and more of the script you're working with. – lincolnk Mar 30 '10 at 13:26
  • With some debugging I think I know whats causing the problem but I don't know how to fix it. When FF and Opera call updateCenter() div.scrollLeft/Top have their correct values as the scrolling as already been performed. In Safari/Chrome they are still both zero at the time of the call (body onload) – Shaunwithanau Mar 30 '10 at 13:55

1 Answers1

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

Shaunwithanau
  • 575
  • 5
  • 13