Закрепление блока с контентом и его скролл
https://codepen.io/Lareta/pen/XWRQeBy
Большая просьба помочь вот с таким моментом, не знаю как это можно реализовать, всё уже перепробовал, знаний не хватает:
<body>
<div class="text">
<h1>Ребята, кто подскажет</h1>
<p>Во время скролла страницы как сделать так, что бы когда блок с красными квадратами встал в центре, то дальнейшее прокручивание колесика мыши скроллило не страницу, а красные квадраты </p>
</p>
А после того, как контент прокрутится до конца, продолжился скролл страницы.
Ну и так же в обратном порядке, когда скролл сраницы снизу вверх, доходим до секции с квадратами, дальнейший скролл прокручивает их сверху вниз, а потом только продолжается скролл страницы.
</p>
<p> Благодарна за любую наводку или подсказку. А может есть готовый плагин или скрипт! </p>
</div>
<div id="scroll-section">
<div class="content">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<div class="text">
<p>Во время скролла страницы как сделать так, что бы когда блок с красными квадратами встал в центре, то дальнейшее прокручивание колесика мыши скроллило не страницу, а красные квадраты </p>
</p>
А после того, как контент прокрутится до конца, продолжился скролл страницы.
Ну и так же в обратном порядке, когда скролл сраницы снизу вверх, доходим до секции с квадратами, дальнейший скролл прокручивает их сверху вниз, а потом только продолжается скролл страницы.
</p>
<p> Благодарна за любую наводку или подсказку. А может есть готовый плагин или скрипт! </p>
</div>
</body>
Основная идея, чтобы когда доскраливали до нужного блока он вставал по центру и мы не могли скроллить до тех пор, пока не прокрутим весь контент.
Просьба ещё помочь с вариантом, где таких блоков, как в примере будет несколько.