#jquery #html #google-chrome
#jquery #HTML #google-chrome
Вопрос:
Когда я изменяю содержимое какого-либо элемента в нижней части страницы, страница прокручивается до начала этого элемента. Например:
$container.html($container.html());
Это работает хорошо, без какой-либо прокрутки страницы, в FF. Кто-нибудь решал такую проблему раньше?
UDP:
Я попробовал это из первого ответа:
$container.css(‘height’,$container.height() ‘px’); $container.html ($container.html ()); $container.css(‘height’,’auto’);
Но 3 строки вызывают перескакивание страницы, поэтому, если просто установить высоту контейнера — это работает хорошо. Но у меня высота запроса может быть разной, она загружается с сервера.
Теперь у меня есть идея найти высоту после вставки содержимого и установить ее вместо ‘auto’: Но Chrome возвращает высоту (innerHeight, outerHeight) родительского контейнера:
var $c = this.options.container;
$c.css('height', $c.height() 'px');
$c.html(data.content || '');
var $child = $c.children();
console.log($child.height(), $child.innerHeight(), $child.outerHeight());
$c.css('height', $child.height() 'px');
В FF возвращаемая высота верна.
Ответ №1:
Если я рискну предположить, то chrome перерисовывается быстрее, а контейнер сжимается, когда он пуст, прежде чем быть заполненным чем-то другим. Вы могли бы попытаться привязать высоту к определенному значению, изменить содержимое, а затем снова установить для него значение auto (если это значение по умолчанию). Что-то вроде этого (непроверенное):
$container.css('height',$container.height() 'px');
$container.html($container.html());
$container.css('height','auto');
Комментарии:
1. Да, это причина, почему. У меня было точно такое же с одним из моих сайтов.
2. Я тоже думал об этом и попробовал это, но это не помогло. Теперь я обнаружил, что настройка высоты действительно помогает без последней строки, но если вы установите «auto», страница снова перейдет на обратную страницу.
Ответ №2:
Я обнаружил, что обычно это происходит из-за того, что я забыл вернуть false в обработчике кликов с помощью jQuery примерно так:
$(‘a’).click( функция(){ $container.html ($container.html ()); возвращает false; } );
Хотя, ваш $container.html ($container.html ()); мне кажется странным.
Комментарии:
1. > Хотя, ваш $container.html ($container.html ()); мне кажется странным. Это способ воспроизвести проблему. На самом деле я загружаю содержимое страницы и вставляю ее в контейнер. Это ajax-разбивка на страницы.
Ответ №3:
Есть решение для поиска.
var $c = this.options.container;
//fix Chrome page jumping
$.browser.webkit amp;amp; $c.css('height', $c.height() 'px');
$c.html(data.content || '');
//fix Chrome page jumping
if ($.browser.webkit) {
setTimeout(function(){
$c.css('height', $c.children().height() 'px');
}, 1);
};