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

To help you get started, we’ve selected a few scroll-into-view-if-needed examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github TheThingsNetwork / lorawan-stack / pkg / webui / components / form / index.js View on Github external
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 })
      }
    }
  }
github TheThingsNetwork / lorawan-stack / pkg / webui / components / form / index.js View on Github external
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 })
      }
    }
  }
github daGrevis / msks / frontend / src / components / Scroller.js View on Github external
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
github ging / ediphy / common / common_tools.es6 View on Github external
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);
        }
    }
}
github onlineconf / onlineconf / admin / js / src / components / TreeNode.tsx View on Github external
componentDidMount() {
		if (this.props.selected) {
			scrollIntoView(this.ecRef.current!, { scrollMode: 'if-needed' });
		}
	}
github raoenhui / next-site-cn / components / docs / sidebar.js View on Github external
function scrollIntoViewIfNeeded(elem, centerIfNeeded, options, config) {
  const finalElement = findClosestScrollableElement(elem)
  return _scrollIntoViewIfNeeded(
    elem,
    centerIfNeeded,
    options,
    finalElement,
    config
  )
}
github pennlabs / penn-courses / frontend / plan / components / selector / Section.js View on Github external
setTimeout(() => {
            const target = document.getElementById(sec.id);
            scrollIntoView(target, {
                behavior: "smooth",
                block: "end",
                scrollMode: "if-needed",
            });
        }, 50);
    };
github lilongllong / netease-music-react / src / nmr / components / PlayerSongListPanel.jsx View on Github external
this.goToSignupNode = () => {
            scrollIntoViewIfNeeded(this._signupNode, true, {
                duration: 150,
                easing: 'easeInOut',
            });
        };
    }
github forcedotcom / lightning-inspector / src / devtoolsPanel / components / ComponentTreeView.js View on Github external
setSelected(isSelected) {
        if (this.isSelected() !== isSelected) {
            this.setState({
                selected: isSelected
            });

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

scroll-into-view-if-needed

Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center

MIT
Latest version published 1 year ago

Package Health Score

73 / 100
Full package analysis

Popular scroll-into-view-if-needed functions