通过一侧滚动改善滚动效果，另一侧根据滚动位置更改图像
Improving scroll effect with one side scroll and the other change image based on scroll position
我创建了这个滚动效果，其中 div divided into left and right side - left side contains of images, that change based on滚动位置，它是固定的，右边是滚动内容。
这是我的想法：
https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css
描述沙盒 - 你可以看到我的滚动效果有效，但是对div只有当鼠标滚动时在那个右边div，我需要的是那个右边div的内容也会在鼠标移动时向下滚动在左div
我试图让整个容器的位置fixed不移动，但是没有用。有什么办法可以实现吗？
下面是我希望的示例：
（从第 1 步开始）
https://honextmaterial.com/process/
你基本上只用 CSS 就可以做到这一点。您可以使右侧（可滚动）侧与左侧重叠 position: absolute。然后整个区域是可滚动的。之后，您将内部元素的宽度更改为 60%，您将在视觉上获得与之前相同的输出。我相应地更改了您的 codesandbox：https://codesandbox.io/s/scroll-effect-forked-55qsf
唯一的缺点是，左侧不再可点击、不可滚动等。如果你想像以前一样保留 HTML & CSS，你必须捕获 scroll-event 和 运行 一些 JavaScript 代码。
为了在 React 中实现你的目标，你需要结合一些 CSS 和 JS 滚动事件。首先，将 position: sticky 分配给您需要在即将离开视口时固定的元素。然后，使用 React ref，您访问可滚动 div 的滚动位置并使用该逻辑设置图像源（您应该避免在 React 中直接使用 getElementById 访问 DOM） .
我创建了这个滚动效果，其中 div divided into left and right side - left side contains of images, that change based on滚动位置，它是固定的，右边是滚动内容。
这是我的想法：
https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css
描述沙盒 - 你可以看到我的滚动效果有效，但是对div只有当鼠标滚动时在那个右边div，我需要的是那个右边div的内容也会在鼠标移动时向下滚动在左div
我试图让整个容器的位置fixed不移动，但是没有用。有什么办法可以实现吗？
下面是我希望的示例：
（从第 1 步开始） https://honextmaterial.com/process/
你基本上只用 CSS 就可以做到这一点。您可以使右侧（可滚动）侧与左侧重叠 position: absolute。然后整个区域是可滚动的。之后，您将内部元素的宽度更改为 60%，您将在视觉上获得与之前相同的输出。我相应地更改了您的 codesandbox：https://codesandbox.io/s/scroll-effect-forked-55qsf
唯一的缺点是，左侧不再可点击、不可滚动等。如果你想像以前一样保留 HTML & CSS，你必须捕获 scroll-event 和 运行 一些 JavaScript 代码。
为了在 React 中实现你的目标，你需要结合一些 CSS 和 JS 滚动事件。首先，将 position: sticky 分配给您需要在即将离开视口时固定的元素。然后，使用 React ref，您访问可滚动 div 的滚动位置并使用该逻辑设置图像源（您应该避免在 React 中直接使用 getElementById 访问 DOM） .