123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645 |
- function _typeof(obj) {
- if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
- _typeof = function (obj) {
- return typeof obj;
- };
- } else {
- _typeof = function (obj) {
- return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
- };
- }
- return _typeof(obj);
- }
- function _defineProperty(obj, key, value) {
- if (key in obj) {
- Object.defineProperty(obj, key, {
- value: value,
- enumerable: true,
- configurable: true,
- writable: true
- });
- } else {
- obj[key] = value;
- }
- return obj;
- }
- function ownKeys(object, enumerableOnly) {
- var keys = Object.keys(object);
- if (Object.getOwnPropertySymbols) {
- var symbols = Object.getOwnPropertySymbols(object);
- if (enumerableOnly) symbols = symbols.filter(function (sym) {
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
- });
- keys.push.apply(keys, symbols);
- }
- return keys;
- }
- function _objectSpread2(target) {
- for (var i = 1; i < arguments.length; i++) {
- var source = arguments[i] != null ? arguments[i] : {};
- if (i % 2) {
- ownKeys(source, true).forEach(function (key) {
- _defineProperty(target, key, source[key]);
- });
- } else if (Object.getOwnPropertyDescriptors) {
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
- } else {
- ownKeys(source).forEach(function (key) {
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
- });
- }
- }
- return target;
- }
- var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source;
- function getClientPosition(elem) {
- var box;
- var x;
- var y;
- var doc = elem.ownerDocument;
- var body = doc.body;
- var docElem = doc && doc.documentElement; // 根据 GBS 最新数据,A-Grade Browsers 都已支持 getBoundingClientRect 方法,不用再考虑传统的实现方式
- box = elem.getBoundingClientRect(); // 注:jQuery 还考虑减去 docElem.clientLeft/clientTop
- // 但测试发现,这样反而会导致当 html 和 body 有边距/边框样式时,获取的值不正确
- // 此外,ie6 会忽略 html 的 margin 值,幸运地是没有谁会去设置 html 的 margin
- x = box.left;
- y = box.top; // In IE, most of the time, 2 extra pixels are added to the top and left
- // due to the implicit 2-pixel inset border. In IE6/7 quirks mode and
- // IE6 standards mode, this border can be overridden by setting the
- // document element's border to zero -- thus, we cannot rely on the
- // offset always being 2 pixels.
- // In quirks mode, the offset can be determined by querying the body's
- // clientLeft/clientTop, but in standards mode, it is found by querying
- // the document element's clientLeft/clientTop. Since we already called
- // getClientBoundingRect we have already forced a reflow, so it is not
- // too expensive just to query them all.
- // ie 下应该减去窗口的边框吧,毕竟默认 absolute 都是相对窗口定位的
- // 窗口边框标准是设 documentElement ,quirks 时设置 body
- // 最好禁止在 body 和 html 上边框 ,但 ie < 9 html 默认有 2px ,减去
- // 但是非 ie 不可能设置窗口边框,body html 也不是窗口 ,ie 可以通过 html,body 设置
- // 标准 ie 下 docElem.clientTop 就是 border-top
- // ie7 html 即窗口边框改变不了。永远为 2
- // 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框,即使设了 border-top 也为 0
- x -= docElem.clientLeft || body.clientLeft || 0;
- y -= docElem.clientTop || body.clientTop || 0;
- return {
- left: x,
- top: y
- };
- }
- function getScroll(w, top) {
- var ret = w["page".concat(top ? 'Y' : 'X', "Offset")];
- var method = "scroll".concat(top ? 'Top' : 'Left');
- if (typeof ret !== 'number') {
- var d = w.document; // ie6,7,8 standard mode
- ret = d.documentElement[method];
- if (typeof ret !== 'number') {
- // quirks mode
- ret = d.body[method];
- }
- }
- return ret;
- }
- function getScrollLeft(w) {
- return getScroll(w);
- }
- function getScrollTop(w) {
- return getScroll(w, true);
- }
- function getOffset(el) {
- var pos = getClientPosition(el);
- var doc = el.ownerDocument;
- var w = doc.defaultView || doc.parentWindow;
- pos.left += getScrollLeft(w);
- pos.top += getScrollTop(w);
- return pos;
- }
- function _getComputedStyle(elem, name, computedStyle_) {
- var val = '';
- var d = elem.ownerDocument;
- var computedStyle = computedStyle_ || d.defaultView.getComputedStyle(elem, null); // https://github.com/kissyteam/kissy/issues/61
- if (computedStyle) {
- val = computedStyle.getPropertyValue(name) || computedStyle[name];
- }
- return val;
- }
- var _RE_NUM_NO_PX = new RegExp("^(".concat(RE_NUM, ")(?!px)[a-z%]+$"), 'i');
- var RE_POS = /^(top|right|bottom|left)$/;
- var CURRENT_STYLE = 'currentStyle';
- var RUNTIME_STYLE = 'runtimeStyle';
- var LEFT = 'left';
- var PX = 'px';
- function _getComputedStyleIE(elem, name) {
- // currentStyle maybe null
- // http://msdn.microsoft.com/en-us/library/ms535231.aspx
- var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name]; // 当 width/height 设置为百分比时,通过 pixelLeft 方式转换的 width/height 值
- // 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19
- // 在 ie 下不对,需要直接用 offset 方式
- // borderWidth 等值也有问题,但考虑到 borderWidth 设为百分比的概率很小,这里就不考虑了
- // From the awesome hack by Dean Edwards
- // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
- // If we're not dealing with a regular pixel number
- // but a number that has a weird ending, we need to convert it to pixels
- // exclude left right for relativity
- if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) {
- // Remember the original values
- var style = elem.style;
- var left = style[LEFT];
- var rsLeft = elem[RUNTIME_STYLE][LEFT]; // prevent flashing of content
- elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT]; // Put in the new values to get a computed value out
- style[LEFT] = name === 'fontSize' ? '1em' : ret || 0;
- ret = style.pixelLeft + PX; // Revert the changed values
- style[LEFT] = left;
- elem[RUNTIME_STYLE][LEFT] = rsLeft;
- }
- return ret === '' ? 'auto' : ret;
- }
- var getComputedStyleX;
- if (typeof window !== 'undefined') {
- getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE;
- }
- function each(arr, fn) {
- for (var i = 0; i < arr.length; i++) {
- fn(arr[i]);
- }
- }
- function isBorderBoxFn(elem) {
- return getComputedStyleX(elem, 'boxSizing') === 'border-box';
- }
- var BOX_MODELS = ['margin', 'border', 'padding'];
- var CONTENT_INDEX = -1;
- var PADDING_INDEX = 2;
- var BORDER_INDEX = 1;
- var MARGIN_INDEX = 0;
- function swap(elem, options, callback) {
- var old = {};
- var style = elem.style;
- var name; // Remember the old values, and insert the new ones
- for (name in options) {
- if (options.hasOwnProperty(name)) {
- old[name] = style[name];
- style[name] = options[name];
- }
- }
- callback.call(elem); // Revert the old values
- for (name in options) {
- if (options.hasOwnProperty(name)) {
- style[name] = old[name];
- }
- }
- }
- function getPBMWidth(elem, props, which) {
- var value = 0;
- var prop;
- var j;
- var i;
- for (j = 0; j < props.length; j++) {
- prop = props[j];
- if (prop) {
- for (i = 0; i < which.length; i++) {
- var cssProp = void 0;
- if (prop === 'border') {
- cssProp = "".concat(prop + which[i], "Width");
- } else {
- cssProp = prop + which[i];
- }
- value += parseFloat(getComputedStyleX(elem, cssProp)) || 0;
- }
- }
- }
- return value;
- }
- /**
- * A crude way of determining if an object is a window
- * @member util
- */
- function isWindow(obj) {
- // must use == for ie8
- /* eslint eqeqeq:0 */
- return obj != null && obj == obj.window;
- }
- var domUtils = {};
- each(['Width', 'Height'], function (name) {
- domUtils["doc".concat(name)] = function (refWin) {
- var d = refWin.document;
- return Math.max( // firefox chrome documentElement.scrollHeight< body.scrollHeight
- // ie standard mode : documentElement.scrollHeight> body.scrollHeight
- d.documentElement["scroll".concat(name)], // quirks : documentElement.scrollHeight 最大等于可视窗口多一点?
- d.body["scroll".concat(name)], domUtils["viewport".concat(name)](d));
- };
- domUtils["viewport".concat(name)] = function (win) {
- // pc browser includes scrollbar in window.innerWidth
- var prop = "client".concat(name);
- var doc = win.document;
- var body = doc.body;
- var documentElement = doc.documentElement;
- var documentElementProp = documentElement[prop]; // 标准模式取 documentElement
- // backcompat 取 body
- return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp;
- };
- });
- /*
- 得到元素的大小信息
- @param elem
- @param name
- @param {String} [extra] 'padding' : (css width) + padding
- 'border' : (css width) + padding + border
- 'margin' : (css width) + padding + border + margin
- */
- function getWH(elem, name, extra) {
- if (isWindow(elem)) {
- return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHeight(elem);
- } else if (elem.nodeType === 9) {
- return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem);
- }
- var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
- var borderBoxValue = name === 'width' ? elem.offsetWidth : elem.offsetHeight;
- var computedStyle = getComputedStyleX(elem);
- var isBorderBox = isBorderBoxFn(elem);
- var cssBoxValue = 0;
- if (borderBoxValue == null || borderBoxValue <= 0) {
- borderBoxValue = undefined; // Fall back to computed then un computed css if necessary
- cssBoxValue = getComputedStyleX(elem, name);
- if (cssBoxValue == null || Number(cssBoxValue) < 0) {
- cssBoxValue = elem.style[name] || 0;
- } // Normalize '', auto, and prepare for extra
- cssBoxValue = parseFloat(cssBoxValue) || 0;
- }
- if (extra === undefined) {
- extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX;
- }
- var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox;
- var val = borderBoxValue || cssBoxValue;
- if (extra === CONTENT_INDEX) {
- if (borderBoxValueOrIsBorderBox) {
- return val - getPBMWidth(elem, ['border', 'padding'], which);
- }
- return cssBoxValue;
- }
- if (borderBoxValueOrIsBorderBox) {
- var padding = extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which) : getPBMWidth(elem, ['margin'], which);
- return val + (extra === BORDER_INDEX ? 0 : padding);
- }
- return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which);
- }
- var cssShow = {
- position: 'absolute',
- visibility: 'hidden',
- display: 'block'
- }; // fix #119 : https://github.com/kissyteam/kissy/issues/119
- function getWHIgnoreDisplay(elem) {
- var val;
- var args = arguments; // in case elem is window
- // elem.offsetWidth === undefined
- if (elem.offsetWidth !== 0) {
- val = getWH.apply(undefined, args);
- } else {
- swap(elem, cssShow, function () {
- val = getWH.apply(undefined, args);
- });
- }
- return val;
- }
- function css(el, name, v) {
- var value = v;
- if (_typeof(name) === 'object') {
- for (var i in name) {
- if (name.hasOwnProperty(i)) {
- css(el, i, name[i]);
- }
- }
- return undefined;
- }
- if (typeof value !== 'undefined') {
- if (typeof value === 'number') {
- value += 'px';
- }
- el.style[name] = value;
- return undefined;
- }
- return getComputedStyleX(el, name);
- }
- each(['width', 'height'], function (name) {
- var first = name.charAt(0).toUpperCase() + name.slice(1);
- domUtils["outer".concat(first)] = function (el, includeMargin) {
- return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX);
- };
- var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
- domUtils[name] = function (elem, val) {
- if (val !== undefined) {
- if (elem) {
- var computedStyle = getComputedStyleX(elem);
- var isBorderBox = isBorderBoxFn(elem);
- if (isBorderBox) {
- val += getPBMWidth(elem, ['padding', 'border'], which);
- }
- return css(elem, name, val);
- }
- return undefined;
- }
- return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX);
- };
- }); // 设置 elem 相对 elem.ownerDocument 的坐标
- function setOffset(elem, offset) {
- // set position first, in-case top/left are set even on static elem
- if (css(elem, 'position') === 'static') {
- elem.style.position = 'relative';
- }
- var old = getOffset(elem);
- var ret = {};
- var current;
- var key;
- for (key in offset) {
- if (offset.hasOwnProperty(key)) {
- current = parseFloat(css(elem, key)) || 0;
- ret[key] = current + offset[key] - old[key];
- }
- }
- css(elem, ret);
- }
- var util = _objectSpread2({
- getWindow: function getWindow(node) {
- var doc = node.ownerDocument || node;
- return doc.defaultView || doc.parentWindow;
- },
- offset: function offset(el, value) {
- if (typeof value !== 'undefined') {
- setOffset(el, value);
- } else {
- return getOffset(el);
- }
- },
- isWindow: isWindow,
- each: each,
- css: css,
- clone: function clone(obj) {
- var ret = {};
- for (var i in obj) {
- if (obj.hasOwnProperty(i)) {
- ret[i] = obj[i];
- }
- }
- var overflow = obj.overflow;
- if (overflow) {
- for (var _i in obj) {
- if (obj.hasOwnProperty(_i)) {
- ret.overflow[_i] = obj.overflow[_i];
- }
- }
- }
- return ret;
- },
- scrollLeft: function scrollLeft(w, v) {
- if (isWindow(w)) {
- if (v === undefined) {
- return getScrollLeft(w);
- }
- window.scrollTo(v, getScrollTop(w));
- } else {
- if (v === undefined) {
- return w.scrollLeft;
- }
- w.scrollLeft = v;
- }
- },
- scrollTop: function scrollTop(w, v) {
- if (isWindow(w)) {
- if (v === undefined) {
- return getScrollTop(w);
- }
- window.scrollTo(getScrollLeft(w), v);
- } else {
- if (v === undefined) {
- return w.scrollTop;
- }
- w.scrollTop = v;
- }
- },
- viewportWidth: 0,
- viewportHeight: 0
- }, domUtils);
- function scrollIntoView(elem, container, config) {
- config = config || {}; // document 归一化到 window
- if (container.nodeType === 9) {
- container = util.getWindow(container);
- }
- var allowHorizontalScroll = config.allowHorizontalScroll;
- var onlyScrollIfNeeded = config.onlyScrollIfNeeded;
- var alignWithTop = config.alignWithTop;
- var alignWithLeft = config.alignWithLeft;
- var offsetTop = config.offsetTop || 0;
- var offsetLeft = config.offsetLeft || 0;
- var offsetBottom = config.offsetBottom || 0;
- var offsetRight = config.offsetRight || 0;
- allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll;
- var isWin = util.isWindow(container);
- var elemOffset = util.offset(elem);
- var eh = util.outerHeight(elem);
- var ew = util.outerWidth(elem);
- var containerOffset;
- var ch;
- var cw;
- var containerScroll;
- var diffTop;
- var diffBottom;
- var win;
- var winScroll;
- var ww;
- var wh;
- if (isWin) {
- win = container;
- wh = util.height(win);
- ww = util.width(win);
- winScroll = {
- left: util.scrollLeft(win),
- top: util.scrollTop(win)
- }; // elem 相对 container 可视视窗的距离
- diffTop = {
- left: elemOffset.left - winScroll.left - offsetLeft,
- top: elemOffset.top - winScroll.top - offsetTop
- };
- diffBottom = {
- left: elemOffset.left + ew - (winScroll.left + ww) + offsetRight,
- top: elemOffset.top + eh - (winScroll.top + wh) + offsetBottom
- };
- containerScroll = winScroll;
- } else {
- containerOffset = util.offset(container);
- ch = container.clientHeight;
- cw = container.clientWidth;
- containerScroll = {
- left: container.scrollLeft,
- top: container.scrollTop
- }; // elem 相对 container 可视视窗的距离
- // 注意边框, offset 是边框到根节点
- diffTop = {
- left: elemOffset.left - (containerOffset.left + (parseFloat(util.css(container, 'borderLeftWidth')) || 0)) - offsetLeft,
- top: elemOffset.top - (containerOffset.top + (parseFloat(util.css(container, 'borderTopWidth')) || 0)) - offsetTop
- };
- diffBottom = {
- left: elemOffset.left + ew - (containerOffset.left + cw + (parseFloat(util.css(container, 'borderRightWidth')) || 0)) + offsetRight,
- top: elemOffset.top + eh - (containerOffset.top + ch + (parseFloat(util.css(container, 'borderBottomWidth')) || 0)) + offsetBottom
- };
- }
- if (diffTop.top < 0 || diffBottom.top > 0) {
- // 强制向上
- if (alignWithTop === true) {
- util.scrollTop(container, containerScroll.top + diffTop.top);
- } else if (alignWithTop === false) {
- util.scrollTop(container, containerScroll.top + diffBottom.top);
- } else {
- // 自动调整
- if (diffTop.top < 0) {
- util.scrollTop(container, containerScroll.top + diffTop.top);
- } else {
- util.scrollTop(container, containerScroll.top + diffBottom.top);
- }
- }
- } else {
- if (!onlyScrollIfNeeded) {
- alignWithTop = alignWithTop === undefined ? true : !!alignWithTop;
- if (alignWithTop) {
- util.scrollTop(container, containerScroll.top + diffTop.top);
- } else {
- util.scrollTop(container, containerScroll.top + diffBottom.top);
- }
- }
- }
- if (allowHorizontalScroll) {
- if (diffTop.left < 0 || diffBottom.left > 0) {
- // 强制向上
- if (alignWithLeft === true) {
- util.scrollLeft(container, containerScroll.left + diffTop.left);
- } else if (alignWithLeft === false) {
- util.scrollLeft(container, containerScroll.left + diffBottom.left);
- } else {
- // 自动调整
- if (diffTop.left < 0) {
- util.scrollLeft(container, containerScroll.left + diffTop.left);
- } else {
- util.scrollLeft(container, containerScroll.left + diffBottom.left);
- }
- }
- } else {
- if (!onlyScrollIfNeeded) {
- alignWithLeft = alignWithLeft === undefined ? true : !!alignWithLeft;
- if (alignWithLeft) {
- util.scrollLeft(container, containerScroll.left + diffTop.left);
- } else {
- util.scrollLeft(container, containerScroll.left + diffBottom.left);
- }
- }
- }
- }
- }
- export default scrollIntoView;
- //# sourceMappingURL=index.js.map
|