message: fix(pattern): removed intersection-observer and scroll fixed
diff: * LICENSE file in the root directory of this source tree.
  */
  -import React, { useEffect, useState } from 'react';
  +import React, { useState, useEffect } from 'react';
  import { settings as ddsSettings } from '@carbon/ibmdotcom-utilities';
  import PropTypes from 'prop-types';
  import root from 'window-or-global';
  @@ -28,26 +28,57 @@ const { prefix } = settings;
  const TOCMobile = ({ menuItems, selectedId, menuLabel, updateState }) => {
  const [selectedOption, setSelectedOption] = useState('menuLabel');
  - /**
  - * Observe element in view
  - *
  - */
  useEffect(() => {
  - const observer = new IntersectionObserver(
  - function(entries) {
  - if (entries[0].intersectionRatio === 0) {
  - setSelectedOption(selectedId);
  - } else if (entries[0].intersectionRatio === 1) {
  + scrollStop(() => {
  + if (areElementsVisible(document.querySelectorAll(`a[name]`))[0]) {
  setSelectedOption('menuLabel');
  + } else if (!areElementsVisible(document.querySelectorAll(`a[name]`))[0]) {
  + setSelectedOption(selectedId);
  }
  - },
  - { threshold: [0, 1] }
  + });
  + });
  +
  + /**
  + * Check if elements are visible
  + *
  + * @param {Array} elements array of HTML components to be checked to be on screen
  + * @returns {Array} array of boolean values based on if the element is on screen
  + */
  + const areElementsVisible = elements => {
  + const elemsPos = Array.prototype.slice.call(elements).map(elem => {
  + const rect = elem.getBoundingClientRect();
  + return (
  + rect.top >= 0 &&
  + rect.left >= 0 &&
  + rect.bottom <=
  + (window.innerHeight || document.documentElement.clientHeight) &&
  + rect.right <=
  + (window.innerWidth || document.documentElement.clientWidth)
  );
  - let target = document.querySelector(
  - `.${prefix}--tableofcontents__mobile-top`
  + });
  +
  + return elemsPos;
  + };
  +
  + /**
  + * Detect scroll stop event and run callback function
  + *
  + * @param {*} callback callback function
  + */
  + const scrollStop = callback => {
  + if (!callback || typeof callback !== 'function') return;
  + let isScrolling;
  + root.addEventListener(
  + 'scroll',
  + () => {
  + root.clearTimeout(isScrolling);
  + isScrolling = setTimeout(() => {
  + callback();
  + }, 200);
  + },
  + false
  );
  - observer.observe(target);
  - }, [menuLabel, selectedId]);
  + };
  /**
  * Handle onChange event of select
  