3

在我的一个项目中，我在 Google Chrome (v.18.0.1025.168 m) 中遇到了一个奇怪的行为。

在 Firefox、IE、Opera 中一切正常，但在 Chrome 中，通过单击指向哈希锚的链接会出现不正确的水平滚动。垂直滚动工作正常，但水平滚动非常糟糕。

有时请求的 div 显示得很好，但在大多数情况下，div 块位于视觉范围的左侧或右侧。

您可以使用以下代码重现这一点。通过单击左上固定菜单：例如 top、left、right、moreright、right。

我不确定这是 Chrome 错误还是我忽略了什么？！你什么意思？有已知的解决方法吗？

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

2 回答 2

2

为每个链接添加 onclick，调用 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);

}

..和Chrome中的水平滚动作品..

于 2012-05-04T21:56:02.163 回答
0

好吧，这绝对是浏览器之间的行为差​​异，但我不会称其为错误。在我看来，解决这个问题的正确地方是Chrome 支持论坛。

至于变通方法，有很多解决方案，其中最明显的就是坚持垂直滚动。要问自己的相关问题是“我想要实现什么功能，我愿意接受什么妥协？”

从您发布的实现中，我假设您正在寻找将更多信息放在单个页面加载上并在不同小节之间快速切换的东西。你真的需要水平滚动吗？是否有某些原因您不使用 javascript 插件？Jquery Tabs 浮现在脑海中，Jquery Accordion也是如此。可能还有很多其他库可以完成同样的事情。

如果您正在使用其他限制，请随时发布它们，我们可以集思广益一些解决方案。

于 2012-05-04T15:41:55.593 回答