mobile-more/es/utils/dom.js

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

import { isBrowser, isWindow } from '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
 */
export var getScrollTop = function getScrollTop() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getScrollOrientation(el, 'top');
};
/**
 * 获取水平滚动的像素数
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
export var 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 (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
 */
export var setScrollTop = function setScrollTop(el, value) {
  setScrollOrientation(el, 'top', value);
};
/**
 * 设置水平滚动像素数值
 *
 * @param el 滚动容器
 * @param value 要设置的滚动数值
 * @returns
 */
export var setScrollLeft = function setScrollLeft(el, value) {
  setScrollOrientation(el, 'left', value);
};
/**
 * 获取元素内容宽度或高度，包括溢出的不可见内容。
 *
 * @param el 滚动容器
 * @param type 宽或高
 * @returns
 */
var getScrollSize = function getScrollSize(el, type) {
  if (!isBrowser || !el) {
    return 0;
  }
  var prop = type === 'width' ? 'scrollWidth' : 'scrollHeight';
  return isWindow(el) ? document.documentElement[prop] : el[prop];
};
/**
 * 获取元素内容高度，包括由于溢出导致的视图中不可见内容
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
export var getScrollHeight = function getScrollHeight() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getScrollSize(el, 'height');
};
/**
 * 获取元素内容宽度，包括由于溢出导致的视图中不可见内容
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
export var 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 (!isBrowser || !el) {
    return 0;
  }
  var prop = type === 'width' ? 'clientWidth' : 'clientHeight';
  return isWindow(el) ? document.documentElement[prop] : el[prop];
};
/**
 * 获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
export var getClientHeight = function getClientHeight() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getClientSize(el, 'height');
};
/**
 * 获取元素内部的宽度，包含内边距，但不包括水平滚动条、边框和外边距
 *
 * @param el 滚动容器，默认 window
 * @returns
 */
export var getClientWidth = function getClientWidth() {
  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  return getClientSize(el, 'width');
};
/**
 * 获取元素父级的滚动容器
 *
 * @param el 要获取滚动容器的元素
 */
export var 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;
};
// 阻止事件捕获和冒泡
export var stopPropagation = function stopPropagation(e) {
  e.stopPropagation();
};
// 触发重绘
export var reflow = function reflow(node) {
  return node === null || node === void 0 ? void 0 : node.scrollTop;
};
// 是否在视窗内
export var 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 事件
export var isSupportTouch = isBrowser && 'ontouchstart' in window;
// 是否支持指针事件
export var isSupportPointer = isBrowser && 'onpointerdown' in window;