javascript - 滚动和位置问题 :fixed

Question

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

100% 的时间在桌面上，当我滚动或跳转到页面内的链接时会发生正确的事情，并且按钮保持在原处。

但是 Chrome for Android 上的行为是:

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

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

不过，好消息是……这个错误很容易在 Chrome 开发者工具中重现。

有几个页面展示了这个问题；一个容易加载的是:

http://awesomesongbook.com/soundtracks/soundtracks.html

有什么建议吗？

代码如下。

谢谢!

$(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');                       
        }
    };
});

Answer 1

这似乎是 Chrome for Android 中记录在案的错误，位置为:已修复。我还没有能够消化这个错误的具体范围。

我在网上看到的侵入性最小的解决方案是将其添加到有问题的元素中:

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

...但这对我不起作用。

对我有用的是禁用用户缩放(捏缩放):

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

这是次优的，因为我更愿意启用用户缩放，但它确实使 position:fixed 的问题消失了。