javascript element-ui@1.x版本的动态调整表底部滚动条位置，引用在表格行数超过屏幕高度，并且列较多的情况

Posted 2021-05-04

/**
 * table 使用的指令，当 table 列较多时，会出现横向滚动条
 * 添加了这个指令，能使底部滚动条不仅仅显示在表格底部，而是会在表格中间出现
 * @param {Number} 可接受一个数字类型参数,表示 table 上边框离浏览器窗口多少px开始fix底部滚动条,默认 0
 */
const ElementTableCtx = '__ElementTableBottomCtx';
function createScrollBar(root) {
  const docfrag = document.createDocumentFragment();
  const scrollWrap = document.createElement('div');
  const scroll = document.createElement('div');
  scrollWrap.style.position = 'absolute';
  scrollWrap.style.top = '9999px';
  scrollWrap.style.width = '100%';
  scrollWrap.style.height = '14px';
  scrollWrap.style.zIndex = '102';
  scrollWrap.style.display = 'block';
  scrollWrap.style.overflowX = 'scroll';
  scrollWrap.style.border = '1px solid #ccc';
  scrollWrap.style.backgroundColor = '#fff';
  scrollWrap.style.padding = '2px 0';
  scrollWrap.classList.add('scroll-wrap');
  scroll.classList.add('scroll-body');
  scroll.style.height = '1px';
  scrollWrap.appendChild(scroll);
  docfrag.appendChild(scrollWrap);
  root.appendChild(docfrag);

  return scrollWrap;
}

export default function install(Vue) {
  Vue.directive('fixed-bottom-scrollbar', {
    bind(el, binding, vnode) {
      const startFixed = binding.value || 0;
      const bodyWrapper = el.querySelector('.el-table__body-wrapper');
      const scrollWrap = createScrollBar(el);

      if (typeof startFixed !== 'number') {
        throw TypeError('fixed-header needs number value');
      }

      const bodyScroll = function bodyScroll() {
        bodyWrapper.scrollLeft = this.scrollLeft;
      };
      scrollWrap.addEventListener('scroll', bodyScroll);

      const windowScroll = () => {
        const pos = el.getBoundingClientRect();
        const screenHeight = window.innerHeight;
        if (pos.top - startFixed < 0 && pos.bottom > screenHeight) {
          if (el[ElementTableCtx].fixed) {
            scrollWrap.style.top = screenHeight - pos.top - 16 + 'px';
          } else {
            scrollWrap.style.top = screenHeight - pos.top - 16 + 'px';
            scrollWrap.scrollLeft = bodyWrapper.scrollLeft;
            el[ElementTableCtx].fixed = true;
          }
        } else {
          scrollWrap.style.top = '9999px';
          el[ElementTableCtx].fixed = false;
        }
      };
      window.addEventListener('scroll', windowScroll);

      el[ElementTableCtx] = {
        bodyScroll,
        windowScroll
      };
    },
    inserted(el, binding, vnode) {
    },
    componentUpdated(el, binding, vnode) {

      setTimeout(() => {
        const tableWrapper = el.querySelector('.el-table__body');
        const scrollBody = el.querySelector('.scroll-body');
        const startFixed = binding.value || 0;
        const scrollWrap = el.querySelector('.scroll-wrap');
        scrollBody.style.width = tableWrapper.clientWidth + 'px';

        const pos = el.getBoundingClientRect();
        const screenHeight = window.innerHeight;
        if (pos.top - startFixed < 0 && pos.bottom > screenHeight) {
          scrollWrap.style.top = screenHeight - pos.top - 16 + 'px';
        }
      }, 150);

    },
    unbind(el) {
      const {windowScroll, onScroll} = el[ElementTableCtx];
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('scroll', windowScroll);
    }
  });
}