CSS，JS:避免在 ScrollTo(） 之前刷新页面

CSS, JS: Avoid flash of page before ScrollTo()

本文关键字：刷新 ScrollTo JS CSS      更新时间：2023-09-26

我正在通过在要隐藏/显示的DIV上设置显示：无/阻止来更改页面内容。对于某些内容，我希望页面开始向下滚动一定量。我为此使用 scrollTo（）。

这在我的桌面上工作正常，但是在我的 iPad 上，我在向下滚动之前看到新内容的闪烁，或者，我看到旧内容在消失之前向下滚动的闪烁。一切都不会立即发生。

对此的解决方案是什么？我尝试重新排序隐藏和显示内容的顺序。

<body>
  <div>header and navigation stuff</div>
  <div id = "content_1">
      content 2
      <button id = "button_goto_2">goto_2</div>
  </div>
  <div id = "content_2" style = "display:none">
      content 2
      ..
      ..
  </div>
</body>

Jquery：

$("html").on("click", "#button_goto_2", function(event) { 
    $("#content_1").css("display","none"); 
    $("#content_2").css("display","block");
    window.scrollTo(0,100); // It is not always 100
})

使用 jQuery 事件的完整函数应该可以解决问题：

$('#content_1').hide(10, function() {
  $('#content_2').css({'visibility': 'hidden'}).show(10, function() {
    window.scrollTo(0,100);
    $('#content_2').css({'visibility': 'visible'});
  });
});
相关文章：