自己实现跟随滚动

// scroll
    $('.main-table').on('scroll', function(){
      let element = document.getElementsByClassName('main-table')[0],
          top = -element.scrollTop,
          left = -element.scrollLeft,
          followTop = parseInt($('.fixed-column .wrapper').css('top')),
          followLeft = parseInt($('.fixed-head .wrapper').css('left'));
          if (left === followLeft){
            // 上下滚动
            $('.fixed-column .wrapper').css('top', top + 'px');
            $('.fixed-head').addClass('scrollY');
            $('.fixed-left-head').addClass('scrollY');
            setTimeout(function(){
              $('.fixed-head').removeClass('scrollY');
              $('.fixed-left-head').removeClass('scrollY');
            },300)
          }
          if (top === followTop){
            // 左右滚动
            $('.fixed-head .wrapper').css('left', left + 'px');
            $('.fixed-column').addClass('scrollX');
            $('.fixed-left-head').addClass('scrollX');
            setTimeout(function(){
              $('.fixed-column').removeClass('scrollX');
              $('.fixed-left-head').removeClass('scrollX');
            },300)
          }
    });

    $('.fixed-column').on("mousewheel DOMMouseScroll", function (e) {
      var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
      let main = document.getElementsByClassName('main-table')[0],
      followTop = parseInt($('.fixed-column .wrapper').css('top'));
      if (delta > 0) {
        // 向上滚
        main.scrollTop -= 60;
      } else if (delta < 0) {
        // 向下滚
        main.scrollTop += 60;
      }
    });

 

posted on 2019-03-20 16:30  natsu07  阅读(184)  评论(0编辑  收藏  举报