JS中,一个元素scrollIntoView会导致页面上position:fixed元素闪动(重绘?)的问题-问答-阿里云开发者社区-阿里云

开发者社区> a123456678> 正文

JS中,一个元素scrollIntoView会导致页面上position:fixed元素闪动(重绘?)的问题

2016-05-27 11:19:58 4416 1

最近遇到了一个问题:
在页面上,有一个fixed的元素(多个也一样)浮动在页面底部,然后页面内容会动态增加。
每当增加一条新内容的时候,就使用scrollIntoView将其滚动到可见区域。但安卓设备(魅族MX3,小米S1)在新增元素scrollIntoView的时候,会导致fixed元素上下抖动一下。

我使用的是knockoutjs来循环输出模板。

viewModel 部分 js代码如下:

#javascript#

function indexViewModel() {
    var self = this;
    self.data = ko.observableArray([]);
    self.init = function() {
        for (var i = 0; i < 10; i++) {
            (function(i) {
                setTimeout(function() {
                    self.data.push(i);        // 10条内容
                }, i * 1000);
            })(i);
        }
    }
    self.scroll = function() {
        $('#response>div:last-child').get(0).scrollIntoView(true);    // 始终让最后一个元素可见
    };
}


window.onload = function() {
    a = new indexViewModel();
    ko.applyBindings(a);
    a.init();
}
html部分代码如下:

#html#

<style>
    #response>div:last-child{
        margin-bottom: 80px;
    }
</style>

<body style="margin: 0;">


<div style="position: fixed;bottom: 0;width: 100%;height: 50px;background-color: rgb(134, 181, 226);">一大段文字。。。。。</div>




<div id="response" data-bind="foreach: {data: data, afterRender: scroll}">
    <div data-bind="template: {name: 'test'}"></div>
</div>




<script type="text/html" id="test">
    <div class="J-test" style="margin-top: 20px;">
        <div style="height: 80px;background-color: #B8A6A6;" data-bind="text: $index"></div>
    </div>
</script>


</body>

screenshot

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:17:28

    这个不知道具体原因,我倒是觉得和IE6 fixed 抖动应该是类似的原因,你可以借鉴IE6的解决方法试试
    http://www.cnblogs.com/slowsoul/archive/2013/05/31/3110135.html

    正常情况下,页面滚动,每个元素之间没有相对的位移,所以浏览器只要把视图平移一下就可以了,这样 fixed的元素也会往上平移,然后浏览器发现这是一个fixed元素不应该网上平移,就再放回去,于是就有抖动了。也就是MX3 android的问题可能来自于浏览器的过度优化代码,添加一些东西不让浏览器做这些优化就可以了

    0 0
相关问答

11

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 64000浏览量 回答数 11

323

回答

云伴侣数据导入问题汇总(Android系统)

os_admin 2011-07-26 17:52:15 63029浏览量 回答数 323

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157037浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92810浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146740浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145580浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85170浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80090浏览量 回答数 13

8

回答

mail.aliyun.com邮箱android手机客户端设置方法

jack_yang 2013-04-24 09:01:34 122030浏览量 回答数 8

14

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 67348浏览量 回答数 14
+关注
0
文章
14879
问答
问答排行榜
最热
最新
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载