滚动时如何在缩放的容器中固定元素

问题描述

我有一个可以水平滚动的视图和一个始终粘在左侧的侧边栏。 该视图可以缩放。

不幸的是，“位置：粘性”属性在缩放容器中无法很好地发挥作用。

我正在尝试使用window.scrollX作为参考，在用户滚动时以编程方式重新定位该元素。

window.addEventListener('scroll',function() {
  document.getElementById("el").setAttribute("style","left:" + window.scrollX * 1.2 + "px");
});

<div style="transform:scale(0.8); transform-origin: 0 0;">
  <div style="width:3000px; background:blue; height: 100px">
    <div id="el">Element 80%</div>
  </div>
</div>

问题在于，当我水平滚动时，似乎丢失了越来越多的像素以正确地匹配视口的左侧。丢失的像素呈线性增长。

这里有一个完整的codepen，可以直观地显示问题（使用箭头滚动）： https://codepen.io/vincentp/pen/pobyWbJ

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）