How to use compute-scroll-into-view - 7 common examples

To help you get started, we’ve selected a few compute-scroll-into-view 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 stipsan / scroll-into-view-if-needed / src / index.ts View on Github external
if (
    isOptionsObject>(options) &&
    typeof options.behavior === 'function'
  ) {
    return options.behavior(targetIsDetached ? [] : compute(target, options))
  }

  // Don't do anything if using a standard behavior on an element that is not in the document
  if (targetIsDetached) {
    return
  }

  // @TODO see if it's possible to avoid this assignment
  const computeOptions = getOptions(options)
  return defaultBehavior(
    compute(target, computeOptions),
    computeOptions.behavior
  )
}
github stipsan / scroll-into-view-if-needed / src / index.ts View on Github external
function scrollIntoView(target: Element, options?: Options | boolean) {
  // Browsers treats targets that aren't in the dom as a no-op and so should we
  const targetIsDetached = !target.ownerDocument!.documentElement!.contains(
    target
  )

  if (
    isOptionsObject>(options) &&
    typeof options.behavior === 'function'
  ) {
    return options.behavior(targetIsDetached ? [] : compute(target, options))
  }

  // Don't do anything if using a standard behavior on an element that is not in the document
  if (targetIsDetached) {
    return
  }

  // @TODO see if it's possible to avoid this assignment
  const computeOptions = getOptions(options)
  return defaultBehavior(
    compute(target, computeOptions),
    computeOptions.behavior
  )
}
github ifiokjr / remirror / packages / multishift / src / multishift-utils.ts View on Github external
export const scrollIntoView = (
  element: Nullable | null | undefined,
  menuElement: Nullable,
) => {
  if (!element || !menuElement) {
    return;
  }

  const actions = computeScrollIntoView(element, {
    boundary: menuElement,
    block: 'nearest',
    scrollMode: 'if-needed',
  });

  actions.forEach(({ el, top, left }) => {
    el.scrollTop = top;
    el.scrollLeft = left;
  });
};
github bmcmahen / sancho / src / Tabs.tsx View on Github external
React.useEffect(() => {
    const target = refs.current!.get(value);
    if (target) {
      const actions = computeScrollIntoView(target, {
        block: "center",
        inline: "center",
        boundary: boundary.current
      });

      if (!actions.length) {
        return;
      }

      const { left } = actions[0];

      scrollRef.current!.scrollTo(left);
    }
  }, [value]);
github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useSelect / useScrollIntoView.tsx View on Github external
function scrollIntoView(node: HTMLElement, menuNode: HTMLElement) {
  if (node === null) {
    return;
  }

  const actions = computeScrollIntoView(node, {
    boundary: menuNode,
    block: "nearest",
    scrollMode: "if-needed",
  });
  actions.forEach(({ el, top, left }) => {
    el.scrollTop = top;
    el.scrollLeft = left;
  });
}
github downshift-js / downshift / src / utils.js View on Github external
function scrollIntoView(node, menuNode) {
  if (node === null) {
    return
  }

  const actions = computeScrollIntoView(node, {
    boundary: menuNode,
    block: 'nearest',
    scrollMode: 'if-needed',
  })
  actions.forEach(({el, top, left}) => {
    el.scrollTop = top
    el.scrollLeft = left
  })
}

compute-scroll-into-view

The engine that powers scroll-into-view-if-needed

MIT
Latest version published 1 year ago

Package Health Score

70 / 100
Full package analysis

Popular compute-scroll-into-view functions