Как сделать скролл, при этом не блокируя зону видимости для элементов внутри, кроме основного?

Для создания скролла в React без блокировки зоны видимости для элементов внутри, вам потребуется использовать CSS свойство overflow в сочетании с React компонентом <div>.

1. В начале создайте компонент, который будет содержать основное содержимое страницы с возможностью прокрутки:

import React from 'react';

const ScrollableContent = ({ children }) => {
  return (
    <div style={{ 
      height: '100%', 
      overflow: 'auto', 
      padding: '10px' 
    }}>
      {children}
    </div>
  );
};

export default ScrollableContent;

2. Внутри этого компонента вы можете разместить любое количество элементов, которые вы хотите сделать прокручиваемыми. Например:

import React from 'react';
import ScrollableContent from './ScrollableContent';

const App = () => {
  return (
    <div style={{ 
      height: '100vh', 
      display: 'flex', 
      flexDirection: 'column' 
    }}>
      <header style={{ 
        height: '50px', 
        backgroundColor: 'lightblue', 
        marginBottom: '10px' 
      }}>
        Header
      </header>
      <ScrollableContent>
        {/* Все элементы, которые должны прокручиваться */}
        <div style={{ 
          height: '500px', 
          backgroundColor: 'lightgrey', 
          marginBottom: '10px' 
        }}>
          Content 1
        </div>
        <div style={{ 
          height: '500px', 
          backgroundColor: 'lightgrey', 
          marginBottom: '10px' 
        }}>
          Content 2
        </div>
        <div style={{ 
          height: '500px', 
          backgroundColor: 'lightgrey', 
          marginBottom: '10px' 
        }}>
          Content 3
        </div>
      </ScrollableContent>
      <footer style={{ 
        height: '50px', 
        backgroundColor: 'lightblue', 
        marginTop: '10px' 
      }}>
        Footer
      </footer>
    </div>
  );
};

export default App;

3. Здесь мы создаем компонент App, который содержит шапку, подвал и компонент ScrollableContent. Шапка и подвал остаются видимыми всегда, а содержимое ScrollableContent может быть прокручено. Внутри ScrollableContent размещены примеры div элементов, которые имеют высоту в 500 пикселей и маргин внизу, чтобы они отличались друг от друга и прокручивались при необходимости.

4. Чтобы установить стили для ваших элементов внутри ScrollableContent, вы можете добавить соответствующие CSS свойства в соответствующих компонентах.

Таким образом, вы создаете контейнер, который будет иметь возможность прокручиваться, но не блокирует зону видимости для элементов внутри, кроме самого основного контента.