0

而我编写的代码有效，因为页面有几个这样的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>

4

1 回答 1

0

你有没有考虑过翻转这个？display: none;在 CSS 中设置绝对位置元素。然后在您的 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>

于 2021-12-26T10:53:19.700 回答