实现视口高度固定的滚动锁定区块（左侧文本固定+右侧图片滚动）问题咨询

各位大佬好！我现在在开发网站的一个区块，想要实现的效果是：

• 左侧是固定不动的文本内容，右侧是可以垂直滚动的多组图片+文字
• 这个区块在用户滚动到它的时候，要占满整个视口高度
• 核心需求是「滚动锁定」：用户在这个区块内滚动时，必须把右侧所有图片都滚动浏览完，页面才会继续往下滚动，不能中途就滑到区块下面的内容

我自己尝试写了一段代码，但目前达不到预期效果：既没法让区块自适应视口高度，也实现不了想要的滚动锁定。下面是我的代码：

<div className="bg-white text-black flex max-sm:!py-[4.5rem] max-sm:!px-[2rem] flex-row md:px-[4rem] gap-2 px-[2rem] w-full box-border md:pt-[6rem] md:pb-[2rem] py-[2rem] justify-center align-middle items-center">
  <div className="overscroll-y-auto bg-white text-black flex flex-col md:flex-row w-[100%] overflow-scroll noScrollbar md:h-[40rem]">
    <div className="w-[100%] flex flex-col md:font-semibold font-medium text-[28px] md:text-[40px] md:w-[50%] md:justify-start text-left font-[Tektur] sticky top-0">
      Suggested Pipelines for Online Stores
      <div className="mt-2 !text-white md:block hidden">
        <Button className="secondaryButton md:!text-inherit !text-[14px] !text-white">
          Browse All Pipelines
        </Button>
      </div>
    </div>
    <div className="font-medium md:w-[60%] justify-between text-center md:text-[1.5rem] text-[1.2rem] font-[Tektur] md:mt-0 mt-5">
      {logos.map((image) => {
        return (
          <div className="text-left pb-5 text-[24px] max-md:w-full md:text-[32px]">
            <img src={image.image} className="w-full mb-5" />
            {image.text}
            <div className="text-[20px] md:text-[24px] font-normal md:w-[70%] font-[Poppins] mb-5" >
              {image.subtext}
            </div>
          </div>
        );
      })}
      <div className="mt-2 !text-white md:hidden block">
        <Button className="secondaryButton md:!text-inherit !text-[14px] !text-white">
          Browse All Pipelines
        </Button>
      </div>
    </div>
  </div>
</div>

目前遇到的具体问题：

1. 区块高度只能用固定值md:h-[40rem]，没法自适应不同设备的视口高度，在小屏或大屏上显示都不对；
2. 没有实现滚动锁定，用户滚动到这个区块时，稍微滑几下就会直接跳过这个区块到下面的内容，没法把滚动限制在这个区块内直到右侧内容浏览完毕。

有没有大佬能帮忙指点一下，怎么调整代码才能实现我想要的效果呀？非常感谢！

内容来源于stack exchange