如何根据滚动位置使用 css 动画来执行此操作？

Question

这个例子有效，但我想知道是否有更好的方法。

理想的解决方案可以让我根据滚动位置或其他内容更新过渡关键帧。这样我就不必在 javascript 中处理复杂的计算了。

任何帮助或见解将不胜感激。

https://jsfiddle.net/chrischilcoat/19dp24ou/

使用此调用的更新方法。

<div ref={pager} onScroll={update} class="relative w-full overflow-x-auto scrollbar-hide">

更新方法。

 const update = () => {
    const currentScrollLeft = pager.current.scrollLeft;
    currentScrollLeft < 125 ? setScrollPosition(currentScrollLeft) : setScrollPosition(125);
    toggleNextBtn();
  }

然后我根据滚动位置更新所需的样式。

const [scrollPosition, setScrollPosition] = React.useState();

  const pager = React.createRef();

  const addWrapperStyles = { 
    'height': (215 - (scrollPosition / .75))+'px',
    'width': (130 - (scrollPosition / 1.7))+'px',
    'borderBottomLeftRadius': (0) +'px',
    'borderBottomRightRadius': (15 + (scrollPosition / 8)) +'px',
    'borderTopLeftRadius':  (0) +'px',
    'borderTopRightRadius': (15 + (scrollPosition / 8)) +'px',
    'paddingTop': (scrollPosition / 15.5)+'px',
  };
  const addImageStyles = {
    'height': (166 - scrollPosition / .92)+'px',
    'width': (166 - scrollPosition / .92)+'px',
    'borderRadius': (scrollPosition / 2)+'px'
  };
  const addPlusStyles = { 
    'marginRight': (scrollPosition / 4)+'px',
    'height': (25 - scrollPosition / 16)+'px',
    'width': (25 - scrollPosition / 16)+'px',
    'borderWidth': '1px',
    'right': (scrollPosition / 7)+'px',
    'marginLeft': ( scrollPosition / 32)+'px'
  };
  const addTextStyles = {
    'opacity': '.08'
  };

然后 React 处理插入新的内联样式。