在Google Chrome浏览器中，页面在$('selector').html('some content')之后跳转 [英] Page is jumping after $('selector').html('some content') in Google Chrome

问题描述

当我更改页面底部某个元素的内容时，页面将滚动到该元素的开头.例如:

When I change content of some element in the bottom of page, page is scrolled to the beginning of this element. For example:

$container.html($container.html());

在FF中，此效果很好，无需任何页面滚动.有人以前解决过这个问题吗?

This works good, without any page scrolling, in FF. Did someone resolve such problem before?

UDP:

我从第一个答案开始尝试了这个

I tried this from first answer:

$ container.css('height'，$ container.height()+'px'); $ container.html($ container.html()); $ container.css('height'，'auto');

$container.css('height',$container.height()+'px'); $container.html($container.html()); $container.css('height','auto');

但是3行会导致页面跳动，因此，如果仅设置容器高度-则效果很好.但是我争辩的高度可以不同，它是从服务器加载的.

But 3 row causes page jumping, so if just set container height - it works good. But I height of contend can be different, it is loaded from server.

现在我有想法在插入内容后找到高度并设置它而不是'auto': 但是Chrome返回父容器的高度(innerHeight，outerHeight):

Now I have idea find height after inserting content and set it instead of 'auto': But Chrome return height(innerHeight, outerHeight) of parent container:

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中返回的高度正确.

In FF returned height is correct.

推荐答案

如果我冒险猜想，那就是chrome的重新绘制速度更快，并且容器在变空之前会收缩，然后再填充其他东西.您可以尝试将高度固定到特定值，更改内容，然后将其再次设置为自动(如果这是默认值).像这样(未经测试):

If I hazard a guess it would be that chrome repaints faster, and the container shrinks when empty before being filled with something else. You could try to pin the height to a specific value, alter the content, and then set it to auto again (if that's its default). Something like this (untested):

$container.css('height',$container.height()+'px');
$container.html($container.html());
$container.css('height','auto');

这篇关于在Google Chrome浏览器中，页面在$('selector').html('some content')之后跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！