Question

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

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

这里是100％缩放：

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

当用户放大页面时，我们不想移动这些元素。我该如何阻止这种意外的动作？

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

代码如下：

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

http://s7.picofile.com/d/8378155676/f18acc00-cccf-4b33-a2d8-6438d7275ddf/loader.zip

var value = 0;
var pos = 0;
var progressHidden = false;
var delay = 40;
var progressEl = $('progress');

// set interval
var timer = setInterval(progress, 70);

function progress() {
  
  // run counter
  value++;
  if (value < 99) {
    progressEl.val(value);
    pos = 1 - (value/100);
  } else if(value < (delay + 100) ) {
    progressEl.val(99);
    pos = 0;
  } else {
    value = 0;
  }
  
  // update background
  progressEl.css('background-position', '0 '+ pos +'em');
  
  // show/hide progress
  if(!progressHidden && value >= 100) {
    progressEl.addClass("hidden");
    progressHidden = true;
    
  } else if(progressHidden && value < 100) {
    progressEl.val(0);
    progressEl.removeClass("hidden");
    progressHidden = false;
  }
  
}

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

#progress-bar {
  position: absolute;
  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;
  }
}

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta charset="utf-8">
        <title>load</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        <div class="container">
            <div id="progress-bar"></div>
        </div>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
       <script src="script.js"></script>

    </body>
</html>

编辑： 我有另一个项目按预期方式运行，并且不会移动页面内容。随时询问文件和整个代码（我在这里放了CSS）：

*{
  overflow: hidden;

}

.container {

  overflow: hidden;
  justify-content: center;
  align-items: center;
}

.number-ticker {
  position:absolute;
  overflow: hidden;
   justify-content: center;
  align-items: center;
  top: 12vw;
  left:6vh;
  color: #D9D9D9;
  font-size: 80vh;
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  height: 100vh;
  background-color: transparent;
}

.number-ticker .digit {
  overflow: hidden;
  float: left;
  line-height: 1;
  transition: margin-top 0.6s ease-in-out;
  text-align: center;
}

Answer 1

有效的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;
      }
    }

缩放页面时停止移动元素

1 个答案: