Question

我正在通过在要隐藏/显示的DIV上设置display：none / block来更改页面内容。对于某些内容，我希望页面开始向下滚动一些量。我使用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

})

Answer 1

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

$('#content_1').hide(10, function() {

  $('#content_2').css({'visibility': 'hidden'}).show(10, function() {
    window.scrollTo(0,100);
    $('#content_2').css({'visibility': 'visible'});
  });
});

CSS，JS：在ScrollTo（）之前避免页面闪存

1 个答案: