Menu
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>
265
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 ..
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With