How to use smooth-scroll-into-view-if-needed - 8 common examples

To help you get started, we’ve selected a few smooth-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 streamr-dev / streamr-platform / app / src / editor / canvas / components / ConsoleSidebar.jsx View on Github external
useEffect(() => {
        // scroll into view if selected
        if (isSelected) {
            scrollIntoView(elRef.current, {
                behavior: 'smooth',
                block: 'start',
                inline: 'nearest',
                scrollMode: 'if-needed',
            })
        }
    }, [isSelected])
github chanzuckerberg / czi-prosemirror / src / ui / LinkTooltip.js View on Github external
(async () => {
          // https://www.npmjs.com/package/smooth-scroll-into-view-if-needed
          await scrollIntoView(el, {
            scrollMode: 'if-needed',
            // block: 'nearest',
            // inline: 'nearest',
            behavior: 'smooth',
          });
        })();
      }
github rubyforgood / circulate / app / javascript / packs / application.js View on Github external
Turbolinks.ScrollManager.prototype.scrollToElement = function(element) {
  let classes = element.classList;
  if (classes.contains("highlightable")) {
    classes.add("highlight");
  }
  scrollIntoView(element, {
    behavior: 'smooth',
    scrollMode: 'if-needed',
  });
}
github streamr-dev / streamr-platform / app / src / docs / components / DocsLayout / Navigation / index.jsx View on Github external
scrollTop = () => {
        const root = document.getElementById('root')

        if (root) {
            scrollIntoView(root, {
                behavior: 'smooth',
                block: 'start',
                inline: 'nearest',
            })
        }
    }
github linuxdeepin / deepin-manual / src / web / js / article.jsx View on Github external
scrollToHash() {
    const hashNode = document.getElementById(this.hash);
    if (hashNode) {
      this.setState({ smoothScroll: true });
      scrollIntoView(hashNode, { behavior: 'smooth', block: 'start' }).then(() => {
        this.setState({ smoothScroll: false });
      });
    } else {
      this.props.setHash(this.props.hlist[0].id);
    }
  }
  componentDidUpdate() {
github streamr-dev / streamr-platform / app / src / shared / components / AutoScroll / index.jsx View on Github external
scroll = (urlHash?: string) => {
        const root = document.getElementById('root')
        const { isModalOpen } = this.context

        if (urlHash) {
            const elementId = urlHash.substr(1)
            const hashReference = document.getElementById(elementId)

            if (hashReference) {
                scrollIntoView(hashReference, {
                    behavior: 'smooth',
                    block: 'start',
                    inline: 'nearest',
                })
            }
        } else if (root && !isModalOpen && window.pageYOffset > 2000) {
            window.scrollTo(0, 0)
        } else if (root && !isModalOpen) {
            scrollIntoView(root, {
                behavior: 'smooth',
                block: 'start',
                inline: 'nearest',
            })
        }
    }
github linuxdeepin / deepin-appstore / src / web / src / app / modules / details / components / comment / app-comment.component.ts View on Github external
scrollToTop() {
    smoothScrollIntoView(document.querySelector('.appInfo'), {
      block: 'start',
    });
  }
}
github zerosoul / tech-logo-memo-game / src / components / Alert.js View on Github external
useEffect(() => {
    if (isVisible) {
      smoothScrollIntoView(document.getElementById('opt_container'), { behavior: 'smooth' });

      disableBodyScroll(modal.current);
    }
  }, [isVisible]);
  return isVisible ? (

smooth-scroll-into-view-if-needed

Ponyfill for smooth scrolling elements into view (if needed!)

MIT
Latest version published 9 months ago

Package Health Score

63 / 100
Full package analysis

Popular smooth-scroll-into-view-if-needed functions