Question

我已经搜索了很长一段时间，可悲的是找不到我确切问题的答案。

各种站点上都有很多主题，例如stackoverflow（例如this question）和许多博客试图“修复” position:fixed元素的缓慢滚动性能（例如benfrain.com ）。但是，我还没有遇到讨论离屏元素的影响的人，这些元素很可能也是position:fixed。

让我们以下面的示例为例。

我最近使用类似的布局开发了一个网站，其中将元素放置在屏幕外，以确保链接也可用于屏幕阅读器等（用于移动设备的导航元素）。但是，鉴于众多网站都描述由于position:fixed元素而导致各种浏览器的滚动性能下降，我很好奇：

问题：在屏幕外放置的固定元素是否也以与在屏幕上的固定元素相同的方式呈现-因此，它们是否会导致滚动性能下降？

编辑：尽可能标记重复的内容，请允许我详细说明：考虑到元素静止处于关闭状态的情况，我的问题是仅 -同时滚动。这与屏幕外元素的实际动作/运动/动画无关，也与视口的其他重新绘制无关。

for (i = 0; i < 50; i++) {
  $("body").append("<p>Pardon me being lazy, inserting 'content' jQuery-way.</p>");
};
$(".show-one").on("click", function() {
  $(".one").toggleClass("show");
});
$(".show-two").on("click", function() {
  $(".two").toggleClass("show");
});

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: lightblue;
}

button {
  width: 50%;
  float: left;
  height: 100%;
}

.off-screen {
  position: fixed;
  width: 100%;
  height: 30%;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  transition: transform .77s ease;
}

.one {
  top: 50px;
  background: lightgreen;
  transform: translate3d(100vw, 0, 0);
}

.two {
  top: 50%;
  background: pink;
  transform: translate3d(0, 100vh, 0);
}

.show {
  transform: translate3d(0, 0, 0);
}

body {
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <button class="show-one">Toggle off-screen one</button>
  <button class="show-two">Toggle off-screen two</button>
</div>
<div class="off-screen one"></div>
<div class="off-screen two"></div>

位于屏幕外的元素会影响滚动性能吗？

0 个答案: