小编Fra*_*ler的帖子

滚动时更改背景附件会导致WebKit中出现图形故障

我有以下问题.

我用这种结构建立了一个网站:

<section id="content">
...
</section>
<footer>
...
</footer>
Run Code Online (Sandbox Code Playgroud)

内容的背景图像设置为固定在底部.现在,当您向下滚动时,图像会在页脚后面滚动.为了防止这种情况,我写了一个简短的脚本,当页脚进入视图时自动设置附件滚动:

$(document).scroll(function () { 
    var curpos = $(window).scrollTop();
    var fooOffset = $('#foot').offset();
    var wh = $(window).height();

    if(curpos >= (fooOffset.top-wh) && fix == 0) {
        $('#content').css('background-attachment','scroll');
        fix = 1;
    } else if(curpos < (fooOffset.top-wh) && fix == 1){
        $('#content').css('background-attachment','fixed');
        fix = 0;
    }
});
Run Code Online (Sandbox Code Playgroud)

这很好地解决了我的问题,几乎适用于所有浏览器.IE没问题,这次Chrome(WebKit一般来说,似乎)给我带来了问题.滚动到底部时,更改正常.当向上和向下滚动一点时,背景开始显示图形故障.当页脚返回到底部时,它再次看起来正常.

有人能帮助我吗?

javascript css webkit background google-chrome

5
推荐指数
1
解决办法
852
查看次数

标签 统计

background ×1

css ×1

google-chrome ×1

javascript ×1

webkit ×1