scroll.js

//scroll.js

(function() {
  //check if autohide is active and sidebar is hidden (not constraining page)
  const _isAutoHidePassthrough = () => {
    const html = document.documentElement;
    if (!html) return false;
    if (!html.classList.contains('dockit-autohide-active')) return false;
    //when autohide is active, only override when sidebar is visible
    const host = document.getElementById('dockit-host-root');
    if (!host) return true;
    return host.classList.contains('dockit-autohide-hidden');
  };

  //return body as scroll wrapper only when sidebar is actively constraining layout
  const _getWrapper = () => {
    if (_isAutoHidePassthrough()) return null;
    return document.body;
  };
  const getDesc = (obj, prop) => Object.getOwnPropertyDescriptor(obj, prop);
  
  const elScrollTop = getDesc(Element.prototype, 'scrollTop');
  const elScrollLeft = getDesc(Element.prototype, 'scrollLeft');
  const elScrollHeight = getDesc(Element.prototype, 'scrollHeight');
  const elScrollWidth = getDesc(Element.prototype, 'scrollWidth');

  const safeDefine = (obj, prop, descriptor) => {
    try {
      const desc = getDesc(obj, prop);
      if (desc && !desc.configurable) {
        return;
      }
      Object.defineProperty(obj, prop, descriptor);
    } catch (e) {
      console.warn(`Dockit failed to define ${prop}:`, e);
    }
  };

  //bing targeted patch
  if (window.location.hostname.includes('bing.com')) {
    //stop resize events from triggering bing's dynamic parameter reloads
    //only suppress when sidebar is actively constraining layout
    window.addEventListener('resize', (e) => {
      if (!_isAutoHidePassthrough()) {
        e.stopImmediatePropagation();
      }
    }, true);
  }

  //override scrollingelement
  safeDefine(document, 'scrollingElement', {
    get: () => _getWrapper() || document.documentElement,
    configurable: true
  });

  const _getOffset = () => {
    if (_isAutoHidePassthrough()) return 0;
    let isFullWidth = false;
    try {
      if (window.sessionStorage.getItem('dockit-sidepanel-open') === '1') {
        isFullWidth = true;
      }
    } catch (e) {}
    if (!isFullWidth && document.body && document.body.classList.contains('dockit-full-width')) {
      isFullWidth = true;
    }
    return isFullWidth ? 0 : 48;
  };

  const winInnerWidthDesc = getDesc(window, 'innerWidth') || getDesc(Window.prototype, 'innerWidth');
  const elClientWidthDesc = getDesc(Element.prototype, 'clientWidth');

  //override window innerwidth
  if (winInnerWidthDesc) {
    safeDefine(window, 'innerWidth', {
      get: () => {
        const val = winInnerWidthDesc.get.call(window);
        return val - _getOffset();
      },
      configurable: true
    });
  }

  //override documentelement clientwidth
  if (elClientWidthDesc) {
    safeDefine(document.documentElement, 'clientWidth', {
      get: () => {
        const val = elClientWidthDesc.get.call(document.documentElement);
        return val - _getOffset();
      },
      configurable: true
    });
  }

  //override window scroll positions
  safeDefine(window, 'scrollY', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollTop.get.call(_w) : 0;
    },
    configurable: true
  });
  safeDefine(window, 'pageYOffset', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollTop.get.call(_w) : 0;
    },
    configurable: true
  });
  safeDefine(window, 'scrollX', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollLeft.get.call(_w) : 0;
    },
    configurable: true
  });
  safeDefine(window, 'pageXOffset', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollLeft.get.call(_w) : 0;
    },
    configurable: true
  });

  //override documentelement scroll metrics
  safeDefine(document.documentElement, 'scrollTop', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollTop.get.call(_w) : 0;
    },
    set: (val) => {
      const _w = _getWrapper();
      if (_w) elScrollTop.set.call(_w, val);
    },
    configurable: true
  });
  safeDefine(document.documentElement, 'scrollLeft', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollLeft.get.call(_w) : 0;
    },
    set: (val) => {
      const _w = _getWrapper();
      if (_w) elScrollLeft.set.call(_w, val);
    },
    configurable: true
  });
  safeDefine(document.documentElement, 'scrollHeight', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollHeight.get.call(_w) : elScrollHeight.get.call(document.documentElement);
    },
    configurable: true
  });
  safeDefine(document.documentElement, 'scrollWidth', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollWidth.get.call(_w) : elScrollWidth.get.call(document.documentElement);
    },
    configurable: true
  });

  //override body scroll metrics
  safeDefine(HTMLBodyElement.prototype, 'scrollTop', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollTop.get.call(_w) : 0;
    },
    set: (val) => {
      const _w = _getWrapper();
      if (_w) elScrollTop.set.call(_w, val);
    },
    configurable: true
  });
  safeDefine(HTMLBodyElement.prototype, 'scrollLeft', {
    get: () => {
      const _w = _getWrapper();
      return _w ? elScrollLeft.get.call(_w) : 0;
    },
    set: (val) => {
      const _w = _getWrapper();
      if (_w) elScrollLeft.set.call(_w, val);
    },
    configurable: true
  });
  safeDefine(HTMLBodyElement.prototype, 'scrollHeight', {
    get: function() {
      const _w = _getWrapper();
      return _w ? elScrollHeight.get.call(_w) : elScrollHeight.get.call(this);
    },
    configurable: true
  });
  safeDefine(HTMLBodyElement.prototype, 'scrollWidth', {
    get: function() {
      const _w = _getWrapper();
      return _w ? elScrollWidth.get.call(_w) : elScrollWidth.get.call(this);
    },
    configurable: true
  });

  //override window scroll methods
  const _origScrollTo = window.scrollTo;
  window.scrollTo = function(x, y) {
    const _w = _getWrapper();
    if (_w) {
      if (typeof x === 'object') _w.scrollTo(x);
      else _w.scrollTo(x, y);
    } else {
      _origScrollTo.apply(window, arguments);
    }
  };
  const _origScrollBy = window.scrollBy;
  window.scrollBy = function(x, y) {
    const _w = _getWrapper();
    if (_w) {
      if (typeof x === 'object') _w.scrollBy(x);
      else _w.scrollBy(x, y);
    } else {
      _origScrollBy.apply(window, arguments);
    }
  };
  const _origScroll = window.scroll;
  window.scroll = function(x, y) {
    const _w = _getWrapper();
    if (_w) {
      if (typeof x === 'object') _w.scrollTo(x);
      else _w.scrollTo(x, y);
    } else {
      _origScroll.apply(window, arguments);
    }
  };
})();