Question

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

100％的时间是在台式机上，当我滚动或跳转到页面内的链接时，正确的事情发生了，而按钮则停留在原处。

但是Android版Chrome上的行为是：

当我向下滚动时，按钮会停留在它们所属的位置
当我向上滚动时，按钮会随内容一起滚动
当我跳至页面中的链接时，大约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

依靠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;
    }
}

Answer 2

这似乎是已记录的位置错误已修复的Android版Chrome浏览器错误。我尚未能够消化该错误的具体范围。

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

-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消失了。

滚动和位置问题：已修复

2 个答案: