微信浏览器不支持scroll,scrollTo,scrollBy

安卓微信浏览器对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);

简单的滑动完事~~~

你可能感兴趣的:(微信浏览器不支持scroll,scrollTo,scrollBy)