如何在整页滚动时正确隐藏绝对元素？

Question

虽然我编写的代码有效，但因为页面中有几个 absolute 元素。隐藏它们需要几毫秒，因此使用低端硬件的用户有时会在页面 y 上看到页面 x 的绝对元素。 有什么办法可以让绝对元素在不跳转屏幕几毫秒的情况下粘在自己的页面上？

var dummy = document.getElementById('dummy');
new Pageable("#container", {
  onInit: function(data){
            adjustItems(data.index)
        },
  onScroll: function(data){
              adjustItems(data.index)
        }
});

function adjustItems(i){
    if(i === 1)
        dummy.style.display = 'block';
    else
      dummy.style.display = 'none';
}

img{
  position:absolute;
  bottom:0;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;  
  width:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pageable/0.6.8/pageable.min.js"></script>
<div id="container">
    <div data-anchor="Page 1">I don't want to see the dummy on this page</div>
    <div data-anchor="Page 2">I want to see dummy on this page
<img id="dummy" src="https://i.postimg.cc/XYgDXZPs/dummiesplanet-bg.png"></div> 
</div>

Answer 1

你考虑过翻转这个吗？在 CSS 中将绝对位置元素设置为 display: none;。然后在你的 JS 中，当你想显示它们时，将它们切换到 display: block;。

这将为使用旧硬件的用户移除这些元素的“闪光”，但代价是可能会延迟元素的显示。这可能是两害相权取其轻。

var dummy = document.getElementById('dummy');
new Pageable("#container", {
  onInit: function(data){
            adjustItems(data.index)
        },
  onScroll: function(data){
              adjustItems(data.index)
        }
});

function adjustItems(i){
    if(i === 1)
        dummy.style.display = 'block';
    else
      dummy.style.display = 'none';
}

img{
  display: none;
  position:absolute;
  bottom:0;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;  
  width:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pageable/0.6.8/pageable.min.js"></script>
<div id="container">
    <div data-anchor="Page 1">I don't want to see the dummy on this page. It is not visible and you won't get a flash of it.</div>
    <div data-anchor="Page 2">I want to see dummy on this page
<img id="dummy" src="https://i.postimg.cc/XYgDXZPs/dummiesplanet-bg.png"></div> 
</div>