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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-05-27 11:19:58 5149 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
相关问答

1

回答

使用java定义一个变量语句: private int cid ;其中的private是什么意思?

2022-04-02 16:17:39 316浏览量 回答数 1

0

回答

新建一个阿里云账号,能否将之前账号阿里云账号中所有数据、产品、配置全部迁移到新账号下面吗

2021-11-24 12:19:43 112浏览量 回答数 0

1

回答

python中os.close(fd)是什么意思呢?

2021-11-07 20:09:36 210浏览量 回答数 1

1

回答

java中float 与 double 的区别是什么?

2021-11-10 20:29:24 137浏览量 回答数 1

1

回答

python中os.dup(fd)是什么意思呢?

2021-11-07 20:09:36 153浏览量 回答数 1

0

回答

请问java线程性能问题:在 Java 中创建一个新线程非常昂贵,而在什么时候应该考虑使用线程池?

2021-11-06 22:04:21 104浏览量 回答数 0

1

回答

Python字典内置方法 dict.fromkeys(seq[, val])什么意思?

2021-11-02 20:29:02 334浏览量 回答数 1

1

回答

python中清空字典,同del dict的代码是什么呀?

2021-10-31 23:24:59 308浏览量 回答数 1

1

回答

移动网站中如何跟踪用户所看的点在页面中的位置来确定是否执行javascript?

2016-06-16 18:55:27 1477浏览量 回答数 1

1

回答

阿里云 论坛里面的论坛版主 51干警网 .没什么事乱屏蔽用户帖子.他是在给 51干警网51ganjing.com 打广告吗???

2016-01-16 17:38:40 3049浏览量 回答数 1
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载