安卓微信浏览器对scroll,scrollTo, scrollBy不支持问题,在苹果微信浏览器中正常。
原功能代码:
/**
* 设置tab偏移
*/
function setTabWrapOffsetX(){
if (this.couponActs.length > 4) {
let tabEl = document.getElementById('tab-wrap'), offsetLeft = tabEl.scrollLeft;
let tabItemWidth = window.document.body.clientWidth/4;
//超出左边
if (tabEl.scrollLeft > this.active*tabItemWidth){
offsetLeft = this.active*tabItemWidth;
}
//超出右边
else if (tabEl.scrollLeft < ((this.active - 3) * tabItemWidth)) {
offsetLeft = ((this.active - 3) * tabItemWidth);
}
//中间
else {
}
tabEl.scrollTo(offsetLeft, 0);
}
},
滚动没有效果。
修改代码:
tabEl.scrollLeft = offsetLeft;
替换
tabEl.scrollTo(offsetLeft, 0);
偏移大致功能实现没有动画效果。
继续修改:
/**
* 滚动动画
* @param {numeber} currentX 需要移动的dom当前位置离网页左端的距离
* @param {number} targetX 需要移动的dom当前位置离要移到的位置的距离
* @param {number} duration 每一步移动的时间
*/
function scroll_Left(el, targetX, duration) {
let _duration = duration?duration:1;
//计算需要移动的距离
let needScrollLeft = targetX - el.scrollLeft;
let _currentX = el.scrollLeft, $this = this;
setTimeout(function () {
//一次调用滑动帧数,每次调用会不一样
const dist = Math.ceil(needScrollLeft / 10);
_currentX += dist;
el.scrollLeft = _currentX;
//如果移动幅度小雨十个像素,直接移动,否则递归
if (needScrollLeft > 10 || needScrollLeft < -10){
$this.scroll_Left(el, targetX, _duration);
}
else {
el.scrollLeft = _currentX;
}
}, _duration)
},
最后修改:
this.scroll_Left(tabEl, offsetLeft, 1);
替换
tabEl.scrollTo(offsetLeft, 0);