位置：修复了Chrome Mobile中的滑动错误 [英] position:fixed sliding bug in Chrome Mobile

问题描述

如果您在手机上的Chrome移动版中查看我的网站并向任意方向滚动，则页脚不会不要留下来。对原因或解决方案有任何想法吗？

If you view my website in Chrome Mobile on a mobile phone and scroll in any direction, the footer wouldn't stay put. Any idea for the cause or a fix?

页脚的CSS代码如下：

The CSS code of the footer looks like the following:

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

    filter:...;

    margin:0;
    padding:0;

    position:fixed;
    bottom:0;

    z-index:3000;
}

最初显示的页脚部分为＃pull2，具有以下CSS属性：

The initially shown part of the footer would be #pull2 with the following CSS properties:

#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;

}

推荐答案

尝试添加;

-webkit-backface-visibility: hidden;

位置：固定。

参考：

简单的CSS修复程序，用于固定定位

位置固定在移动浏览器中不起作用

或者您也可以使用jQuery

Alternatively you can achieve this with jQuery

工作小提琴

Working Fiddle

$(document).ready(function () {

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

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

});

这篇关于位置：修复了Chrome Mobile中的滑动错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！