scrollTop在FireFox与Chrome浏览器间的兼容问题

FireFox与Chrome的scrollTop的兼容问题

直到我今天在FireFox测试时发现,火狐下页面滚动的跳转功能无法使用。

1、原生接口测试

scrollTop在FireFox与Chrome浏览器间的兼容问题_第1张图片

这里先提一下:

scrollTop在FireFox与Chrome浏览器间的兼容问题_第2张图片

document.documentElement 即  < html > 元素,而  document.body 即   < body > 元素。

测试结果,在火狐上只能通过html元素来获取和设定页面滚动高度,而在谷歌上反之只能用body元素来获取和设定。

2、jquery接口测试

上面是使用原生的scrollTop属性来获取与设定,而jquery自己也实现了对scrollTop属性的封装,可以试试他的兼容性。

scrollTop在FireFox与Chrome浏览器间的兼容问题_第3张图片

发现采用 $(document) 可以实现对获取和设定scrollTop的兼容,大喜。

3、scrollTop动画实现测试

虽然实现了兼容,但为了有更好的效果,我希望采用动画的方式滚动到页面的某位置,而不是直接跳转,这里采用jquery的 animate 函数来实现。

scrollTop在FireFox与Chrome浏览器间的兼容问题_第4张图片

发现虽然可以采用$(document)来实现获取和设定,但动画效果都无法使用,还是只能用body元素和html元素来实现。

最终解决方案

遂最完美的实现方案是:

获取或 直接设定 当前页面滚动高度:

$(document).scrollTop();//获取,兼容火狐谷歌

有动画效果的设定当前页面高度:

$("body,html").animate({ scrollTop: ... });//动画滚动效果,兼容火狐谷歌


scrollTop在FireFox与Chrome浏览器间的兼容问题_第5张图片



http://www.tuicool.com/articles/UZNv2u

你可能感兴趣的:(JS,jq)