最近遇到了一个问题：
在页面上，有一个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>
写回答
这个不知道具体原因，我倒是觉得和IE6 fixed 抖动应该是类似的原因，你可以借鉴IE6的解决方法试试
http://www.cnblogs.com/slowsoul/archive/2013/05/31/3110135.html
正常情况下，页面滚动，每个元素之间没有相对的位移，所以浏览器只要把视图平移一下就可以了，这样 fixed的元素也会往上平移，然后浏览器发现这是一个fixed元素不应该网上平移，就再放回去，于是就有抖动了。也就是MX3 android的问题可能来自于浏览器的过度优化代码，添加一些东西不让浏览器做这些优化就可以了
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
