ScrollIntoViewCase() — react Function Reference

Architecture documentation for the ScrollIntoViewCase() function in ScrollIntoViewCase.js from the react codebase.

Function javascript CompilerCore Gating

Entity Profile

CompilerCore→ Gating→ ScrollIntoViewCase() — react Function Reference

Dependency Diagram

graph TD
  e139556b_02ce_49c6_ad63_99044aa8c8c3["ScrollIntoViewCase()"]
  27ba34e6_f88b_164f_49ef_2bc73dd2da13["ScrollIntoViewCase.js"]
  e139556b_02ce_49c6_ad63_99044aa8c8c3 -->|defined in| 27ba34e6_f88b_164f_49ef_2bc73dd2da13
  style e139556b_02ce_49c6_ad63_99044aa8c8c3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js lines 48–184

export default function ScrollIntoViewCase() {
  const [exampleType, setExampleType] = useState('simple');
  const [alignToTop, setAlignToTop] = useState(true);
  const [caseInViewport, setCaseInViewport] = useState(false);
  const fragmentRef = useRef(null);
  const testCaseRef = useRef(null);
  const noChildRef = useRef(null);
  const scrollContainerRef = useRef(null);

  const scrollVertical = () => {
    fragmentRef.current.scrollIntoView(alignToTop);
  };

  const scrollVerticalNoChildren = () => {
    noChildRef.current.scrollIntoView(alignToTop);
  };

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setCaseInViewport(true);
        } else {
          setCaseInViewport(false);
        }
      });
    });
    testCaseRef.current.observeUsing(observer);

    const lastRef = testCaseRef.current;
    return () => {
      lastRef.unobserveUsing(observer);
      observer.disconnect();
    };
  });

  return (
    <Fragment ref={testCaseRef}>
      <TestCase title="ScrollIntoView">
        <TestCase.Steps>
          <li>Toggle alignToTop and click the buttons to scroll</li>
        </TestCase.Steps>
        <TestCase.ExpectedResult>
          <p>When the Fragment has children:</p>
          <p>
            In order to handle the case where children are split between
            multiple scroll containers, we call scrollIntoView on each child in
            reverse order.
          </p>
          <p>When the Fragment does not have children:</p>
          <p>
            The Fragment still represents a virtual space. We can scroll to the
            nearest edge by selecting the host sibling before if
            alignToTop=false, or after if alignToTop=true|undefined. We'll fall
            back to the other sibling or parent in the case that the preferred
            sibling target doesn't exist.
          </p>
        </TestCase.ExpectedResult>
        <Fixture>
          <Fixture.Controls>
            <Controls
              alignToTop={alignToTop}
              setAlignToTop={setAlignToTop}
              scrollVertical={scrollVertical}
              exampleType={exampleType}
              setExampleType={setExampleType}
            />
          </Fixture.Controls>
          {exampleType === 'simple' && (
            <Fragment ref={fragmentRef}>
              <ScrollIntoViewCaseSimple />
            </Fragment>
          )}
          {exampleType === 'horizontal' && (
            <div
              style={{
                display: 'flex',
                overflowX: 'auto',
                flexDirection: 'row',
                border: '1px solid #ccc',
                padding: '1rem 10rem',