How to use scroll-into-view-if-needed - 10 common examples

componentDidUpdate(prevProps) {
    const { formError, isSubmitting, isValid } = this.props
    const { isSubmitting: prevIsSubmitting, formError: prevFormError } = prevProps

    // Scroll form notification into view if needed
    if (formError && !prevFormError) {
      scrollIntoView(this.notificationRef.current, { behavior: 'smooth' })
      this.notificationRef.current.focus({ preventScroll: true })
    }

    // Scroll invalid fields into view if needed and focus them
    if (prevIsSubmitting && !isSubmitting && !isValid) {
      const firstErrorNode = document.querySelectorAll('[data-needs-focus="true"]')[0]
      if (firstErrorNode) {
        scrollIntoView(firstErrorNode, { behavior: 'smooth' })
        firstErrorNode.querySelector('input,textarea').focus({ preventScroll: true })
      }
    }
  }

componentDidUpdate(prevProps) {
    const { formError, isSubmitting, isValid } = this.props
    const { isSubmitting: prevIsSubmitting, formError: prevFormError } = prevProps

    // Scroll form notification into view if needed
    if (formError && !prevFormError) {
      scrollIntoView(this.notificationRef.current, { behavior: 'smooth' })
      this.notificationRef.current.focus({ preventScroll: true })
    }

    // Scroll invalid fields into view if needed and focus them
    if (prevIsSubmitting && !isSubmitting && !isValid) {
      const firstErrorNode = document.querySelectorAll('[data-needs-focus="true"]')[0]
      if (firstErrorNode) {
        scrollIntoView(firstErrorNode, { behavior: 'smooth' })
        firstErrorNode.querySelector('input,textarea').focus({ preventScroll: true })
      }
    }
  }

updateScroll = () => {
    const isScrollable = this.node.clientHeight !== this.node.scrollHeight
    const shouldRescroll = !!(
      this.props.items &&
      this.props.items.length &&
      (!isScrollable || isCloseToTop(this.node) || isCloseToBottom(this.node))
    )

    switch (this.scrollAction) {
      case SCROLL_ACTIONS.toItem:
        scrollIntoViewIfNeeded(document.getElementById(this.props.itemId), {
          scrollMode: 'if-needed',
          block: 'center',
        })
        break

      case SCROLL_ACTIONS.adjustForTop:
        // Force stop momentum scrolling.
        this.node.style.overflow = 'hidden'
        this.node.scrollTop =
          this.scrollTop + (this.node.scrollHeight - this.scrollHeight)
        this.node.style.overflowY = 'scroll'
        break

      case SCROLL_ACTIONS.toBottom:
        this.node.scrollTop = this.node.scrollHeight
        break

export function scrollElement(node, options) {
    let cfg = options || { duration: 300, centerIfNeeded: true, easing: 'easeInOut' };
    if (node) {
        let isSafari = (/constructor/i).test(window.HTMLElement) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window.safari || (typeof safari !== 'undefined' && safari.pushNotification));

        if (!isSafari) {
            scrollIntoViewIfNeeded(node, cfg);
        }
    }
}

componentDidMount() {
		if (this.props.selected) {
			scrollIntoView(this.ecRef.current!, { scrollMode: 'if-needed' });
		}
	}

function scrollIntoViewIfNeeded(elem, centerIfNeeded, options, config) {
  const finalElement = findClosestScrollableElement(elem)
  return _scrollIntoViewIfNeeded(
    elem,
    centerIfNeeded,
    options,
    finalElement,
    config
  )
}

setTimeout(() => {
            const target = document.getElementById(sec.id);
            scrollIntoView(target, {
                behavior: "smooth",
                block: "end",
                scrollMode: "if-needed",
            });
        }, 50);
    };

this.goToSignupNode = () => {
            scrollIntoViewIfNeeded(this._signupNode, true, {
                duration: 150,
                easing: 'easeInOut',
            });
        };
    }

setSelected(isSelected) {
        if (this.isSelected() !== isSelected) {
            this.setState({
                selected: isSelected
            });

            const element = ReactDOM.findDOMNode(this);
            if (element) {
                scrollIntoViewIfNeeded(element);
            }
        }
    }