mientras que el código que escribí funciona, porque la página tiene algunos de estos elementos absolute . se tarda un par de milisegundos en ocultarlos, por lo que los usuarios que tienen hardware de gama baja a veces verán los elementos absolutos de la página x en la página y. ¿Hay alguna forma de hacer que los elementos absolutos se adhieran a su propia página sin saltar en la pantalla durante un par de milisegundos?
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>¿Has considerado darle la vuelta a esto? Tener los elementos de posición absoluta configurados para display: none; en CSS. Luego, en su JS, muévalos para display: block; cuando quieras mostrarlos.
Esto eliminaría el 'flash' de estos elementos para los usuarios con hardware antiguo, a costa de posiblemente tener un retraso en la aparición de los elementos. Este podría ser el menor de los dos males.
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>