安卓微信瀏覽器對(duì)scroll搔谴,scrollTo, scrollBy不支持問題嵌言,在蘋果微信瀏覽器中正常窄绒。
原功能代碼:
/**
* 設(shè)置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);
}
},
滾動(dòng)沒有效果汞贸。
修改代碼:
tabEl.scrollLeft = offsetLeft;
替換
tabEl.scrollTo(offsetLeft, 0);
偏移大致功能實(shí)現(xiàn)沒有動(dòng)畫效果侥蒙。
繼續(xù)修改:
/**
* 滾動(dòng)動(dòng)畫
* @param {numeber} currentX 需要移動(dòng)的dom當(dāng)前位置離網(wǎng)頁(yè)左端的距離
* @param {number} targetX 需要移動(dòng)的dom當(dāng)前位置離要移到的位置的距離
* @param {number} duration 每一步移動(dòng)的時(shí)間
*/
function scroll_Left(el, targetX, duration) {
let _duration = duration?duration:1;
//計(jì)算需要移動(dòng)的距離
let needScrollLeft = targetX - el.scrollLeft;
let _currentX = el.scrollLeft, $this = this;
setTimeout(function () {
//一次調(diào)用滑動(dòng)幀數(shù)暗膜,每次調(diào)用會(huì)不一樣
const dist = Math.ceil(needScrollLeft / 10);
_currentX += dist;
el.scrollLeft = _currentX;
//如果移動(dòng)幅度小雨十個(gè)像素,直接移動(dòng)鞭衩,否則遞歸
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);