位置:Chrome Mobile中的固定滑动错误

Question

位置:Chrome Mobile中的固定滑动错误

如果您在移动电话上使用Chrome Mobile 查看我的网站并向任何方向滚动,则页脚将无法保留.对原因或修复有任何想法吗？

页脚的CSS代码如下所示:

#footer{
    width:100%;
    height:auto;

    filter:...;

    margin:0;
    padding:0;

    position:fixed;
    bottom:0;

    z-index:3000;
}

Run Code Online (Sandbox Code Playgroud)

最初显示的页脚部分是#pull2,具有以下CSS属性:

#pull2 {

    width: 100%;

    display: block;
    position:static;
    float:none;

    padding-left:10px;

    z-index:0;

    background: ...;
    background-position:...;
    cursor:pointer;

}

#pull2 p{

    line-height: 40px;
    margin:0;

}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Aam*_*zad 14

尝试添加;

-webkit-backface-visibility: hidden;

Run Code Online (Sandbox Code Playgroud)

与position: fixed.

参考:

简单的CSS修复固定定位
 位置固定不在移动浏览器中工作

或者,您可以使用jQuery实现此目的

工作小提琴

$(document).ready(function () {

    var winHeight = $(window).height();

    $(window).scroll(function () {
        $("#footer").css("top", $(window).scrollTop() + (winHeight-30) + "px");
    });

});

Run Code Online (Sandbox Code Playgroud)

Answer 2

Nik*_*fin 7

除了这个-webkit-backface-visibility: hidden技巧之外,元素大于页面似乎也会引起问题position: fixed(根据这个问题).它也可能值得添加<meta name="viewport" content="user-scalable=no">到您的<head>标签.

禁用页面的用户缩放不是最好的主意。如果用户无法阅读某些内容，他们将尝试扩展，如果无法阅读，则只会生气:) (2认同)
有趣的是，即使元素比当前页面更宽，Android 上的 Chrome Mobile 和 Chrome 桌面移动仿真也会导致这种情况。iOS 上的 Chrome 和所有 Firefox 不受影响。解决方案是修复您的元素，使其不会超出页面的宽度，然后一切正常。两者之间的联系方式超出了我的范围，但它确实有效。 (2认同)

归档时间：	11 年，6 月前
查看次数：	14667 次
最近记录：	9 年，1 月前