AJAX .load() into <移动屏幕——快把我逼疯了


AJAX .load() into <div> move screen - driving me crazy!

我希望有人能好心地提供一点帮助。

我有一个<DIV>在我的客户的页面底部,其中包含一个订单。当表单被提交时,它将数据发送到php脚本,该脚本处理并返回一个布局,取代<DIV>中的表单。这些都可以工作,除了一个烦人的东西:

窗口向上移动一点,使最终布局离屏幕底部一半。我宁愿它没有,只是加载布局到<DIV>没有任何屏幕移动。

谁能帮帮忙防止窗户向上移动?谢谢!

听起来你在添加新的'layout'之前清除了div中的html。如果没有看到你的代码,我当然不能确定。

然而,一个解决这个问题的方法是为用户偷偷地滚动窗口,因为它无论如何都在页面的底部。将其添加到AJAX的末尾。负载调:

 $('html').animate({scrollTop: $elem.height()}, 100);

My two cents:

我知道作者在他们的情况下找到了一个有效的解决方案,但原来的问题从未得到解决。我刚刚遇到了同样的问题,我可以告诉你这个问题是由。hide()和。fadein()引起的。当您hide()一个元素时,它会向元素添加一个display: none样式,并且屏幕会刷新以适应这个样式,即使只是一瞬间。正因为如此,窗口才会移动或倾斜一点(或很大程度上取决于元素中有多少数据)。

这个问题的"修复"是一个两步的过程:

  1. 在被隐藏的元素周围添加一个div,并将div的高度设置为隐藏原始元素之前被隐藏元素的高度。这样,div将保持原始元素的高度,即使div的内容被隐藏,窗口也不会滚动。
  2. 在原始元素被填充后重置包装器div的高度。如果你不这样做,那么你可能会遇到元素重叠的问题,或者可能包装器div太小,无法容纳原始元素的内容。

此解决方案仅适用于当您想要替换元素中的内容并执行渐隐效果以显示新内容时的情况。没有渐隐,你可以跳过隐藏,你不必担心这个问题。我想这可能会帮助那些像我一样沮丧的人,当我试图在不让屏幕跳来跳去的情况下进行淡出时。

,

html:

<div id="divWrapper">
  <div id="divHideMe">
    <p>Some content that needs to fade in.</p>
  </div>
</div>
jquery:

$('#divWrapper').css('height',$('#divHideMe').height()+'px'); // prevent scrollbar movement (step 1)
$('#divHideMe').hide().html('<p>Load something new in here<br /><br />This is so much more content!</p>');
$('#divWrapper').css('height',$('#divHideMe').height()+'px'); // adjust for original element height difference (step 2)
$('#divHideMe').fadeIn();