AJAX .load () на <div>экран перемещения - сводит меня с ума!

Question

Я надеюсь, что кто-то будет достаточно любезен, чтобы предложить небольшую помощь с этим.

У меня есть <DIV> в нижней части страниц моего клиента, который содержит форму заказа. Когда форма отправляется, она отправляет данные в php-скрипт, который обрабатывает и возвращает макет, заменяющий форму в <DIV>. Это все работает за исключением одной раздражающей вещи:

Окно немного смещается вверх, так что получающийся макет находится наполовину от нижней части экрана. Я бы предпочел, чтобы этого не произошло, и просто загрузил макет в <DIV> без движения экрана.

Может кто-нибудь предложить небольшую помощь, чтобы предотвратить движение окна вверх? Спасибо!

Answer 1

Звучит так, как будто вы очищаете html в div перед добавлением нового 'layout'. Конечно, я не могу быть уверен, не увидев твой код.

Однако исправление для этого заключается в том, чтобы незаметно прокрутить окно для пользователя, так как оно все равно находится внизу страницы. Добавьте это в конец обратного вызова AJAX.load:

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

Answer 2

Мои 2 цента:

Я понимаю, что автор нашел решение, которое работало в их ситуации, но первоначальная проблема так и не была решена.У меня просто была такая же проблема, и я могу сказать вам, что проблема вызвана .hide () и .fadeIn ().Когда вы скрываете () элемент, он добавляет к элементу стиль display: none, и экран обновляется, чтобы приспособиться к этому, даже если это всего лишь доля секунды.Именно из-за этого окно немного смещается или прокручивается (или много, в зависимости от того, сколько данных было в элементе).

«Исправление» для этой проблемы - это двухэтапный процесс:

1. Добавьте div вокруг скрытого элемента и установите высоту div равной высоте скрытого элемента ДО скрытия исходного элемента.Таким образом, div будет поддерживать высоту исходного элемента, и окно никогда не будет прокручиваться, даже если содержимое div было скрыто.
2. Сброс высоты 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();