滾動條懸浮(可以優化)

  // 滾動條
  fixTableScroller: function() {
    let tableH = $(".master-table-container").height(); // table高度
    let winH = $(window).height(); // 瀏覽器高度
    let ol = 0; // table左邊距
    let wTop = 0; // 滾動條top
    $("#scroll-container").css({ // 懸浮scroll寬度
        width: ($(".master-table-container").width()) + "px"
    });
    if ($(".master-table").width() >$(".master-table-container").width()) {
        if ($(window).scrollLeft() == 0) {
          ol = $(".right").offset().left;
        } else {
          ol = $(".right").offset().left - $(window).scrollLeft();
        }
        // 懸浮scroll距離左邊的left值
        $("#scroll-container").css({
          left: (ol+20) + "px",
          display: "block"
        });
        $(".master-scroller-content, .master-batch-operate").css({
          width: $(".master-table").width() + "px"
        });
    } else {
      $("#scroll-container").css({
        opacity: 0,
        display: "none"
      });
    }
    $(window).on("scroll", function(e) {
        wTop = $(this).scrollTop();
        if ($(this).scrollLeft() == 0) {
          ol = $(".right").offset().left;
        } else {
          ol = $(".right").offset().left - $(this).scrollLeft();
        }
         // 懸浮scroll距離左邊的left值
        $("#scroll-container").css({
            left: (ol+20) + "px"
        });
        $(".master-scroller-content").css({
          width: $(".master-table").width() + "px"
        });
        // 判斷瀏覽器的高度是否大於table表格高度
        let perNum = 0;
        console.log($(window).height(), tableH, (wTop/tableH).toFixed(2))
        if ($(window).height() >= 910) {
          perNum = 0.12;
        } else if (winH < 910 && winH>= tableH) {
          perNum = 0.74;
        } else {
          perNum = 0.42;
        }
        if ($(window).height() >tableH) {
          $("#scroll-container").css({
            opacity: 0,
            display: "none"
          });
        } else {
          if ((wTop/tableH).toFixed(2)<=perNum && tableH !=0 && $(".master-table").width() >$(".master-table-container").width()) {
            $("#scroll-container").css({
              opacity: 1,
              display: "block"
            });
          } else {
            $("#scroll-container").css({
              opacity: 0,
              display: "none"
            });
          }
        }
    });
    $("#scroll-container").on("scroll", function(e) {
        $(".master-container").scrollLeft($(this).scrollLeft());
    });
  }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章