CODEWITHSUNDEEP
google-chromeanchorcss-positionhorizontal-scrolling
code_angel
code_angel

Reputation: 1537

Incorrect horizontal scrolling by clicking on links to hash-anchors in Google Chrome

In one of my projects i encounter a strange behavior in Google Chrome (v.18.0.1025.168 m).

In Firefox, IE, Opera works everything fine, but in Chrome there is an incorrect horizontal scrolling by clicking on links to hash-anchors. Vertical scrolling works ok, but horizontal is very bad.

Sometime the requested div is displayed well, but in most cases the div-blocks are left or right outside the visual scope.

You can reproduce this with the following code. By clicking on the top-lef-fixed menu: top, left, right, moreright, right for example.

I am not sure if this is a Chrome-Bug or i am overlook something?! What do you mean? Is there a known workaround?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google-Chrome don't follows anchors properly - incorrect horizontal scrolling</title>
<style type="text/css">
body
{
    min-width: 700px;
    overflow: auto;
}

div
{
    position: absolute;
    width: 400px;
    height: 300px;
    z-index: 1;
    padding-left:160px;
}

#top
{
    border: 1px solid black;
    top:0px;
    left: 400px;
    background: gray;
}

#left
{
    border: 1px solid blue;
    left:0px;
    top: 400px;
    background:#00d;
}

#right
{
    border: 1px solid orange;
    left:800px;
    top: 800px;
    background: yellow;
}
#moreright
{
    border: 1px solid red;
    left:1600px;
    top: 1500px;
    background:#d00;
}

div#fixedmenu
{
    position: fixed;
    top:0;
    left: 0;
    width: 150px;
    height: 150px;
    background: #ddd;
    border: 1px solid gray;
    z-index: 2;
    margin: 0;
    padding:0;
}

</style>
</head>
<body>
<div id="top" >top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="moreright">moreright</div>

<div id="fixedmenu">
    <ul>
        <li><a href="#top">top</a></li>
        <li><a href="#left">left</a></li>
        <li><a href="#right">right</a></li>
        <li><a href="#moreright">moreright</a></li>
    </ul>
</div>
</body>
</html>

Upvotes: 3

Views: 2393

Answers (2)

code_angel
code_angel

Reputation: 1537

For each link add onclick, who call a Javascript Jump-Function::

<a href="#moreright" onclick="jump('moreright')">moreright</a>

JS:

function jump(element_id)
{
        var d = document.getElementById(element_id);

        var gx = d.offsetLeft;
        var e = d;
        if (d.offsetParent) while (e = e.offsetParent) gx += e.offsetLeft;

        var gy = d.offsetTop;
        var e = d;
        if (d.offsetParent) while (e = e.offsetParent) gy += e.offsetTop;

        window.scrollTo(gx,gy);

}

.. and horizontal scrolling in Chrome works ..

Upvotes: 2

Patrick M
Patrick M

Reputation: 10989

Well it is definitely a difference in behavior between browsers, but I would stop short of calling it a bug. The right place to go to sort that out would be the Chrome Support Forums, in my opinion.

As for a work around, there are a lot of solutions, the most obvious of which is to just stick to vertical scrolling. The pertinent question to ask yourself is "what functionality am I trying to achieve and what compromises am I willing to accept?"

From the implementation you posted, I would assume you're looking for something to put more information on a single page load and quickly flip between different subsections. Do you really need to scroll horizontally? Is there some reason you're not using a javascript plugin? Jquery Tabs comes to mind, as does Jquery Accordion. There are probably a lot of other libraries that accomplish the same thing.

If there are other restrictions you're working with, feel free to post them and we can brainstorm some solutions.

Upvotes: 0

Related Questions