最近遇到了一个问题:
在页面上,有一个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#
#response>div:last-child{
margin-bottom: 80px;
}
图片中蓝色的地方就是当新增的褐色块scrollIntoView的时候,手机上会抖动的地方。
各位朋友知道怎么解决么?谢谢啦~!