Javascript 滚动和位置问题：已修复

我维护一个网页，它有一些按钮，当你在页面中滚动和/或跳转到链接时，这些按钮应该相对于窗口保持固定（其中一个按钮会将你带到页面中的随机链接）。我使用position:fixed执行此操作，每当我收到用于滚动/调整大小/URL更改的回调时，我都会重新定位元素。代码如下

在台式机上，当我滚动或跳转到页面中的链接，按钮保持在原来的位置时，100%的时间都是正确的

但Android版Chrome上的行为是：

• 当我向下滚动时，按钮停留在它们所属的位置
• 当我向上滚动时，按钮会随着内容一起滚动
• 当我跳转到页面内的链接时，正确的事情大约有50%的时间发生

在这两种情况下，错误发生后（即按钮消失），如果向下滚动10行，按钮会再次出现。在这些情况下（基于打印输出），会调用用于重新定位控件的回调，但它无法正确定位元素

好消息是，这个bug很容易在Chrome开发者工具中复制

有几页展示了这个问题；一个简单的加载方法是：

有什么建议吗

代码如下

谢谢

$(window).load(function(){

    $(window).scroll(positionScroller);
    $(window).resize(positionScroller);
    $(window).bind('hashchange',positionScroller);

    positionScroller();

    function positionScroller()
    {
        $('#scroller').css('visibility','visible');

        if (window.screen.width > 800)
        {
            $('#scroller').css('position', 'fixed');
            $('#scroller').css('bottom',10);
            $('#scroller').css('right',10);                   
            $('#scroller').css('top','auto');
            $('#scroller').css('left','auto')
        }
        else
        {
            $('#scroller').css('position', 'fixed');            
            $('#scroller').css('top',5);
            $('#scroller').css('left',5);
            $('#scroller').css('bottom','auto');
            $('#scroller').css('right','auto');                       
        }
    };
});

---

绝对有必要依赖JavaScript吗？在我看来，最好的处理方法是使用纯CSS。根据您的代码，您可以使用媒体查询来定位滚动条的填充

#scroller {
    position:fixed;
    bottom:auto;
    right:auto;                   
    top:5px;
    left:5px;
}

@media all and (min-width: 801px)
{
    #scroller {
        bottom:10px;
        right:10px;                   
        top:auto;
        left:auto;
    }
}

---

这似乎是Chrome for Android中的一个有记录的bug，其位置为：已修复。我还不能理解这个bug的具体范围

我在网上看到的最小侵入性解决方案是将其添加到相关元素中：

-webkit-transform: translate3d(0, 0, 0);
transform : translate3d(0, 0, 0);

…但那对我不起作用

对我有效的方法是禁用用户缩放（从收缩到缩放）：

---

这是次优的，因为我更喜欢启用用户缩放功能，但它确实会使position:fixed的问题消失。

我没有JavaScript或jQuery附件，但当我使用您的建议时，我得到了相同的行为。。。当我向上滚动时，固定组件会消失，直到我向下滚动几行。这并不是说它们相对于内容是固定不变的；如果我向上滚动1000行，我仍然只需要向下滚动10行左右就可以恢复固定元素。它的行为就像Chrome没有在所有滚动事件上重新定位position:fixed元素一样，但这似乎与position:fixed相反。@DanMorris介意用代码创建一个JSFIDLE，这样我就可以确切地看到您的体验。你声称Android上的Chrome是罪魁祸首，我也想试试我的Android，看看这里发生了什么进一步的数据表明我的html中其他地方发生了什么：当我使用Chrome调试工具（在Windows上）并将其指向实时站点时，我能够复制这个问题。但当我使用完全相同的浏览器配置并将其指向本地运行的相同html时，我无法复制问题（一切正常）。嗯。有没有人听说过在本地和远程环境下会触发Chrome布局的不同行为？

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">