ScrollIntoViewMixed() — react Function Reference

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

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ ScrollIntoViewMixed() — react Function Reference

Dependency Diagram

graph TD
  1e854bb5_867a_4cc3_99f0_ef7feb9bb636["ScrollIntoViewMixed()"]
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  1e854bb5_867a_4cc3_99f0_ef7feb9bb636 -->|defined in| f361f511_643d_fef8_84d3_4e38e9129616
  style 1e854bb5_867a_4cc3_99f0_ef7feb9bb636 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js lines 173–246

function ScrollIntoViewMixed() {
  const fragmentRef = useRef(null);
  const [message, setMessage] = useState('');

  const tryScrollIntoView = alignToTop => {
    fragmentRef.current.scrollIntoView(alignToTop);
    setMessage(
      `Called scrollIntoView(${alignToTop}) - page should scroll to fragment`
    );
  };

  const targetStyle = {
    height: 300,
    marginBottom: 50,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '24px',
    fontWeight: 'bold',
  };

  return (
    <TestCase title="scrollIntoView - Mixed Content">
      <TestCase.Steps>
        <li>Scroll down the page so the fragment is not visible</li>
        <li>Click one of the scrollIntoView buttons</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        The fragment contains raw text nodes (not wrapped in elements) and
        elements in alternating order. With alignToTop=true, scroll starts from
        the last child and works backwards, ending with the first text node at
        the top. With alignToTop=false, scroll starts from the first child and
        works forward, ending with the last text node at the bottom. Text nodes
        use the Range API for scrolling.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <button onClick={() => tryScrollIntoView(true)}>
            scrollIntoView(true)
          </button>
          <button onClick={() => tryScrollIntoView(false)}>
            scrollIntoView(false)
          </button>
          {message && (
            <div style={{marginTop: '10px', color: 'green'}}>{message}</div>
          )}
        </Fixture.Controls>
        <div
          style={{
            marginTop: '100vh',
            marginBottom: '100vh',
            whiteSpace: 'pre-wrap',
            lineHeight: '2',
          }}>
          <Fragment ref={fragmentRef}>
            TEXT NODE 1 - This is a raw text node at the start of the fragment
            <div style={{...targetStyle, backgroundColor: 'lightyellow'}}>
              ELEMENT 1
            </div>
            TEXT NODE 2 - This is a raw text node between elements
            <div style={{...targetStyle, backgroundColor: 'lightpink'}}>
              ELEMENT 2
            </div>
            TEXT NODE 3 - This is a raw text node between elements
            <div style={{...targetStyle, backgroundColor: 'lightcyan'}}>
              ELEMENT 3
            </div>
            TEXT NODE 4 - This is a raw text node at the end of the fragment
          </Fragment>
        </div>
      </Fixture>
    </TestCase>
  );
}