如何创建具有有限跨度的特定于部分的视差

Question

我有以下 html 结构

<section class="why">
          <div class="why__contour">
            <h2 class="why__text">some title</h2>
            <div class="why__grid">
              <p class="why__grid-element why__grid-element_profession">
              some text
              </p>
              <p class="why__grid-element why__grid-element_travel">
                some text
              </p>
              <p class="why__grid-element why__grid-element_points">
                some text
              </p>
              <p class="why__grid-element why__grid-element_knowledge">
                some text
              </p>
              <p class="why__grid-element why__grid-element_intouch">
                some text
              </p>
              <p class="why__grid-element why__grid-element_consult">
                
              </p>
              <p class="why__grid-element why__grid-element_snacks">
                some text
              </p>
            </div>
          </div>
        </section>

在一个部分内有一个轮廓（容器），其中有一个简单的网格。

我希望这个网格能够响应鼠标滚动或滚动条的移动而移动。 不是越过屏幕，而是在用户向下滚动时更靠近轮廓（容器）的边界，而当用户向上滚动页面时更靠近轮廓（容器）的边界。

就像在这个屏幕截图中一样：

它应该如何滚动

最好的方法是什么？