开发者社区> 问答> 正文

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

最近遇到了一个问题:
在页面上,有一个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

展开
收起
a123456678 2016-05-27 11:19:58 6016 0
1 条回答
写回答
取消 提交回答
  • 这个不知道具体原因,我倒是觉得和IE6 fixed 抖动应该是类似的原因,你可以借鉴IE6的解决方法试试
    http://www.cnblogs.com/slowsoul/archive/2013/05/31/3110135.html

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

    2019-07-17 19:17:28
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载