@deepjs/dom/lib/index.js

dom utils

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getScrollTop = getScrollTop;
exports.setScrollTop = setScrollTop;
exports.getElementTop = getElementTop;
exports.getVisibleHeight = getVisibleHeight;
exports.getScrollEventTarget = getScrollEventTarget;
exports.isAttached = isAttached;
exports.on = on;
exports.off = off;
exports.once = once;
exports.supportsPassive = void 0;

/*!
 * @Author: cloudyan <cloudcode@qq.com>
 * @Created at: 2020-03-25 22:03:00
 * 功能说明: dom 相关操作
 */
// 获取元素距离顶部高度
function getScrollTop(element) {
  return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
} // 设置滚动高度


function setScrollTop(element, value) {
  'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value);
} // 获取元素距离顶部高度


function getElementTop(element) {
  return (element === window ? 0 : element.getBoundingClientRect().top) + getScrollTop(window);
}

function getVisibleHeight(element) {
  return element === window ? element.innerHeight : element.getBoundingClientRect().height;
}
/* 找到最近的触发滚动事件的元素
 * @param {Element} element
 * @param {Element} rootElement
 * @return {Element | window}
 */


function getScrollEventTarget(element) {
  var rootParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window;
  var currentNode = element; // bugfix, see http://w3help.org/zh-cn/causes/SD9013 and
  // http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome

  while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1 && currentNode !== rootParent) {
    var _this$getComputedStyl = this.getComputedStyle(currentNode),
        overflowY = _this$getComputedStyl.overflowY;

    if (overflowY === 'scroll' || overflowY === 'auto') {
      return currentNode;
    }

    currentNode = currentNode.parentNode;
  }

  return rootParent;
} // 判断元素是否被加入到页面节点内


function isAttached(element) {
  var currentNode = element.parentNode;

  while (currentNode) {
    if (currentNode.tagName === 'HTML') {
      return true;
    }

    if (currentNode.nodeType === 11) {
      return false;
    }

    currentNode = currentNode.parentNode;
  }

  return false;
}

var supportsPassive = false;
exports.supportsPassive = supportsPassive;

try {
  var opts = {};
  Object.defineProperty(opts, 'passive', {
    get: function get() {
      exports.supportsPassive = supportsPassive = true;
    }
  });
  window.addEventListener('test-passive', null, opts);
} catch (e) {// do nothing
} // 移动端Web界面滚动性能优化: Passive event listeners
// https://blog.csdn.net/shenlei19911210/article/details/70198771
// passive 设置为true时，表示 listener 永远不会调用 preventDefault() 来优化性能


function on(target, event, handler) {
  var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  target.addEventListener(event, handler, supportsPassive ? {
    capture: false,
    passive: passive
  } : false);
}

function off(target, event, handler) {
  target.removeEventListener(event, handler);
}

function once(el, event, fn) {
  var listener = function listener() {
    if (fn) {
      fn.apply(this, arguments);
    }

    off(el, event, listener);
  };

  on(el, event, listener);
}