Question

我希望有人会对此提供一些帮助。

我的客户页面底部有一个<DIV>，其中包含订单。提交表单时，它会将数据发送到php脚本，该脚本处理并返回替换<DIV>中表单的布局。这一切都有效，除了一件烦人的事情：

窗口向上移动一点，以便最终的布局与屏幕底部相差一半。我宁愿它没有，只是将布局加载到<DIV>而没有任何屏幕移动。

任何人都可以提供一些帮助来防止窗户向上移动吗？谢谢！

Answer 1

听起来你在添加新的'布局'之前清除了div中的html。如果没有看到你的代码，我无法确定。

然而，对此的一个解决方法是偷偷地滚动用户的窗口，因为它无论如何都在页面的底部。将其添加到AJAX.load回调的末尾：

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

Answer 2

我的2美分：

我意识到作者找到了一个适合他们情况的解决方案，但最初的问题从未得到解决。我遇到了同样的问题，我可以告诉你，问题是由.hide（）和.fadeIn（）引起的。当你隐藏（）一个元素时，它会向元素添加一个display：none样式，并且屏幕会刷新以适应这个，即使它只是一瞬间。正因为如此，窗口移动或者稍微移动（或者很多，取决于元素中的数据量）。

此问题的“修复”是一个两步过程：

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

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

例如：

<强> 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();

AJAX .load（）进入<div>移动屏幕 - 让我疯狂！</div>

2 个答案: