通过一侧滚动和另一侧根据滚动位置更改图像来改善滚动效果答案

【问题标题】：Improving scroll effect with one side scroll and the other change image based on scroll position通过一侧滚动和另一侧根据滚动位置更改图像来改善滚动效果
【发布时间】：2021-10-29 03:14:24
【问题描述】：

我创建了这个滚动效果，其中div 分为左侧和右侧 - 左侧包含图像，根据滚动位置而变化，并且它是固定的，右侧正在滚动内容。

这是我的想法：

https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css

描述沙盒 - 你可以看到我的滚动效果有效，但 right div 仅当鼠标在 right div 上时才会滚动，我需要的是，当鼠标在 left div

上时，该 right div 的内容也会向下滚动

我试图让整个容器的位置fixed 所以它不会移动，但它不起作用。有没有办法实现它？

这是我想要的示例：

（从第 1 步开始） https://honextmaterial.com/process/

【问题讨论】：

标签： javascript css reactjs sass styles

【解决方案1】：

你基本上可以只用 CSS 来做到这一点。您可以使用position: absolute 使右侧（可滚动）与左侧重叠。然后整个区域是可滚动的。之后，您将内部元素的宽度更改为 60%，您将在视觉上获得与以前相同的输出。我相应地更改了您的codesandbox：https://codesandbox.io/s/scroll-effect-forked-55qsf

唯一的缺点是，左侧不再可点击、可滚动等。如果您想像以前一样保留 HTML 和 CSS，则必须捕获 scroll-event 并运行一些 JavaScript 代码。

【讨论】：

【解决方案2】：

要在 React 中实现您的目标，您需要一些 CSS 和 JS 滚动事件的组合。首先，将position: sticky 分配给您需要在即将离开视口时修复的元素。然后，使用 React ref，您可以访问可滚动 div 的滚动位置并使用该逻辑来设置您的图像源（您应该避免在 React 中使用 getElementById 直接访问 DOM）。

这是working codesandbox example

【讨论】：

我没想到会这样！看起来更干净，有道理！谢谢！