javascript – 同时设置scrollLeft和scrollTop

前端之家收集整理的这篇文章主要介绍了javascript – 同时设置scrollLeft和scrollTop前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法同时设置scrollLeft和scrollTop的div?在Chrome,Safari和Opera中,它可以按顺序设置,但在Firefox(4岁以上)和IE(即使在IE9!)中,其中一个会导致回流导致丑陋的故障,因为页面将首先向左移动,像一个楼梯动作.

我看到该窗口有一个名为scrollTo(x,y)的方法,是否有正常的div的等价物?

或者,是否可以更改浏览器的行为,因此只有更改滚动条件才能触发回流.我发现一个来源说,这只会发生,如果我有在div上注册的事件事件,但我没有任何这样不会是问题.

解决方法

刚才我有同样的问题.我发现动画建议不是很好(跳跃,滞后,最终更糟),但随附的jQuery插件至少稍微好一些.对我来说,它所需的开销并不是真正值得的微小的收益.

在我的情况下,我有一个可滚动的div,里面有一个大图.图像越大,回流越差.我可以在设置滚动属性之前立即隐藏div,然后立即再次显示,从而大大改善了情况.这允许IE忽略在第一个属性设置之后重新渲染内容,而是等待直到该元素再次被看到(在它们被设置之后).

任何主要浏览器的任何当前版本似乎没有闪烁(这是我的第一个关注).在Firefox 4,Opera 11,Chrome 10,IE 8,IE8兼容性和Safari 5中进行了测试.

在jQuery中:

var my_pane = $('#my_scroll_pane');
my_pane.css( 'visibility','hidden' );
my_pane.scrollTop( 100 ).scrollLeft( 100 );
my_pane.css( 'visibility','visible' );

常规ole’JavaScript:

var scroll_pane = document.getElementById('my_scroll_pane');
scroll_pane.style.visibility = 'hidden';
scroll_pane.scrollTop = 100;
scroll_pane.scrollLeft = 100;
scroll_pane.style.visibility = 'visible';

更新:这在FF3.6中大致闪烁.如果任何人有任何不涉及浏览器嗅探的想法,任何意见都将受到欢迎.

猜你在找的JavaScript相关文章