mobile-more/lib/utils/dom.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.stopPropagation = exports.setScrollTop = exports.setScrollLeft = exports.reflow = exports.isSupportTouch = exports.isSupportPointer = exports.isInViewport = exports.getScrollWidth = exports.getScrollTop = exports.getScrollParent = exports.getScrollLeft = exports.getScrollHeight = exports.getClientWidth = exports.getClientHeight = void 0;
var _ut = require("ut2");
/**
 * 获取水平/垂直滚动像素数值
 *
 * @param el 滚动容器
 * @param orientation 朝向
 * @returns
 */
var getScrollOrientation = function getScrollOrientation(el, orientation) {
  if (!el) {
    return 0;
  }
  var prop = orientation === 'top' ? 'scrollTop' : 'scrollLeft';
  var result = 0;
  if (el === document.body || el === document.documentElement) {
    result = Math.max(document.body[prop], document.documentElement[prop]);
  } else {
    // @ts-ignore
    result = prop in el ? el[prop] : el[orientation === 'top' ? 'scrollY' : 'scrollX'];
  }
  return result;
};

/**
 * 获取垂直滚动像素数值
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
var getScrollTop = exports.getScrollTop = function getScrollTop() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getScrollOrientation(el, 'top');
};

/**
 * 获取水平滚动的像素数
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
var getScrollLeft = exports.getScrollLeft = function getScrollLeft() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getScrollOrientation(el, 'left');
};

/**
 * 设置水平/垂直滚动像素数值
 *
 * @param el 滚动容器
 * @param orientation 朝向
 * @param value 要设置的滚动数值
 * @returns
 */
var setScrollOrientation = function setScrollOrientation(el, orientation, value) {
  var prop = orientation === 'top' ? 'scrollTop' : 'scrollLeft';
  if ((0, _ut.isWindow)(el)) {
    var bodyScrollValue = document.body[prop];
    var rootScrollValue = document.documentElement[prop];
    if (bodyScrollValue > 0 && rootScrollValue !== 0) {
      document.body[prop] = value;
    } else {
      document.documentElement[prop] = value;
    }
  } else if (el) {
    el[prop] = value;
  }
};

/**
 * 设置垂直滚动像素数值
 *
 * @param el 滚动容器
 * @param value 要设置的滚动数值
 * @returns
 */
var setScrollTop = exports.setScrollTop = function setScrollTop(el, value) {
  setScrollOrientation(el, 'top', value);
};

/**
 * 设置水平滚动像素数值
 *
 * @param el 滚动容器
 * @param value 要设置的滚动数值
 * @returns
 */
var setScrollLeft = exports.setScrollLeft = function setScrollLeft(el, value) {
  setScrollOrientation(el, 'left', value);
};

/**
 * 获取元素内容宽度或高度，包括溢出的不可见内容。
 *
 * @param el 滚动容器
 * @param type 宽或高
 * @returns
 */
var getScrollSize = function getScrollSize(el, type) {
  if (!_ut.isBrowser || !el) {
    return 0;
  }
  var prop = type === 'width' ? 'scrollWidth' : 'scrollHeight';
  return (0, _ut.isWindow)(el) ? document.documentElement[prop] : el[prop];
};

/**
 * 获取元素内容高度，包括由于溢出导致的视图中不可见内容
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
var getScrollHeight = exports.getScrollHeight = function getScrollHeight() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getScrollSize(el, 'height');
};

/**
 * 获取元素内容宽度，包括由于溢出导致的视图中不可见内容
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
var getScrollWidth = exports.getScrollWidth = function getScrollWidth() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getScrollSize(el, 'width');
};
var getClientSize = function getClientSize(el, type) {
  if (!_ut.isBrowser || !el) {
    return 0;
  }
  var prop = type === 'width' ? 'clientWidth' : 'clientHeight';
  return (0, _ut.isWindow)(el) ? document.documentElement[prop] : el[prop];
};

/**
 * 获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
var getClientHeight = exports.getClientHeight = function getClientHeight() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getClientSize(el, 'height');
};

/**
 * 获取元素内部的宽度，包含内边距，但不包括水平滚动条、边框和外边距
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
var getClientWidth = exports.getClientWidth = function getClientWidth() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getClientSize(el, 'width');
};

/**
 * 获取元素父级的滚动容器
 *
 * @param el 要获取滚动容器的元素
 */
var getScrollParent = exports.getScrollParent = function getScrollParent(el) {
  if (el instanceof HTMLElement || el instanceof SVGAElement) {
    var current = el.parentElement;
    while (current) {
      if (current.scrollHeight > current.offsetHeight) {
        return current;
      }
      current = current.parentElement;
    }
  }
  return window;
};

// 阻止事件捕获和冒泡
var stopPropagation = exports.stopPropagation = function stopPropagation(e) {
  e.stopPropagation();
};

// 触发重绘
var reflow = exports.reflow = function reflow(node) {
  return node === null || node === void 0 ? void 0 : node.scrollTop;
};

// 是否在视窗内
var isInViewport = exports.isInViewport = function isInViewport(el) {
  if (!el) {
    return false;
  }
  var elRect = el.getBoundingClientRect();
  var winHeight = getClientHeight(window);
  return elRect.bottom <= winHeight && elRect.top >= 0;
};

// 是否支持Touch事件
// 区分移动端和PC端的事件，移动端也会触发 mouseup mousedown 事件
var isSupportTouch = exports.isSupportTouch = _ut.isBrowser && 'ontouchstart' in window;

// 是否支持指针事件
var isSupportPointer = exports.isSupportPointer = _ut.isBrowser && 'onpointerdown' in window;