Javascript 缩放页面时停止移动元素

经过大量的努力和研究，我终于找到了一种方法，可以在缩放页面的同时调整页面上的元素大小，并且可以正常工作（如果使用“vh”和“vw”而不是“px”或“em”单位缩放页面，则所有大小都保持不变）

现在的问题是，当我放大页面时，元素会移向页面的右下角

这里是100%缩放：

当我们将页面放大到500%时：

当用户放大页面时，我们不想移动这些元素。我怎样才能阻止那个意外的动作

应该有一个纯CSS解决方案。

代码如下：

注意：请不要在此处或CodePen上测试代码！出于某种原因，如果您创建单独的HTML、CSS和JS文件并仅在chrome上进行测试，缩放效果很好！当我在Stack Snippet和CodePen上测试它时，它不起作用。我已附上这些文件，以便查看下面的链接

var值=0；
var-pos=0；
var-progressHidden=false；
无功延迟=40；
var progressEl=$（“进度”）；
//设定间隔
var定时器=设置间隔（进度，70）；
功能进展（）{
//背道而驰
值++；
如果（值<99）{
进展值；
位置=1-（值/100）；
}否则如果（值<（延迟+100））{
进展值（99）；
pos=0；
}否则{
数值=0；
}
//更新背景
css（'background-position'，'0'+pos+'em'）；
//显示/隐藏进度
如果（！progressHidden&&value>=100）{
progressEl.addClass（“隐藏”）；
progressHidden=true；
}else if（progressHidden&值<100）{
进展值（0）；
progressEl.removeClass（“隐藏”）；
progressHidden=false；
}
}

.container{
溢出：隐藏；
证明内容：中心；
对齐项目：居中；
}
#进度条{
位置：绝对位置；
边框：0vh实心rgba（0,0,0,0.8）；
宽度：0vw；
高度：1.5727391874180865vh；
利润率：0vh 0 1vw；
背景：重复线性梯度（-45度，红色，红色2.6525198938992043vh，橙色2.6525198938992043vh，橙色5.305039787798409vh）；
边界半径：3vh；
动画：滚动10秒线性无限；
盒影：插图0.651041666666666666VW 1.31061598995150722VH rgba（255，255，255，0.2），插图0vh 0.06510416666666667vw 0vh rgba（255，255，255，0.3），插图0-0.325520833333VW 0.393184798545216VH rgba（0，0，0，0，0.2），0.1953125vw 0.2621231979030144vh rgba（0，0，0.3）；
}
#进度条：之后{
位置：绝对位置；
宽度：13.0208333334VW；
高度：2.6212319790301444vh；
边界：0.1310615989515072vh固体rgba（13,13,13,0.7）；
背景：rgba（13,13,13,0.7）；
边界半径：3vh；
内容：“；
左：-0.325520833333333VW；
顶部：-0.6553079947575361vh；
z指数：-1；
}
@-webkit关键帧滚动{
0% {
宽度：0vw；
}
100% {
宽度：12.369791666VW；
}
}

负载

工作CSS：

 .container {
      overflow: hidden;
      justify-content: center;
      align-items: center;
    }

    #progress-bar {
     position:absolute;
       justify-content: center;
      align-items: center;
       left: 10vw;
      top:  10vh;
      border: 0vh solid rgba(0, 0, 0, 0.8);
      width: 0vw;
      height: 1.5727391874180865vh;
      margin: 0vh 0 0 1vw;
      background: repeating-linear-gradient(-45deg, red, red 2.6525198938992043vh, orangered 2.6525198938992043vh, orangered  5.305039787798409vh);
      border-radius: 3vh;
      animation: roll 10s linear infinite;
      box-shadow: inset 0 0.6510416666666666vw 1.3106159895150722vh rgba(255, 255, 255, 0.2), inset 0vh 0.06510416666666667vw 0vh rgba(255, 255, 255, 0.3), inset 0 -0.3255208333333333vw 0.3931847968545216vh rgba(0, 0, 0, 0.2), 0 0.1953125vw 0.2621231979030144vh rgba(0, 0, 0, 0.3);
    }

    #progress-bar:after {
      position: absolute;
      width: 13.020833333333334vw;
      height: 2.6212319790301444vh;
      border: 0.1310615989515072vh solid rgba(13, 13, 13, 0.7);
      background: rgba(13, 13, 13, 0.7);
      border-radius: 3vh; 
      content: "";
      left: -0.3255208333333333vw;
      top:  -0.6553079947575361vh;
      z-index: -1;
    }

    @-webkit-keyframes roll {
      0% {
        width: 0vw;
      }
      100% {
        width: 12.369791666666666vw;
      }
    }

---

@卡哈普卡是的。。。但并不总是。。。有时候一团乱是唯一能救你的…我正在开发一个网络应用程序，我需要把它放在一个清晰的故事情节的iFrame上。。。如果缩放功能起作用，我将丢失iFrame的内容，因为故事情节的内容不符合页面缩放。。。和