BLUF:使用jQuery Waypoints用滚动到元素ID的方式更新location.hash
会导致FF中的滚动冒泡/卡顿,但不会导致Chrome或IE中的滚动。
问题:当用户滚动具有以下基本布局的表时,我使用jQueryWaypoints来做一些事情:
____________________________________________________
| <tr class="category" id="cat1">Category One</tr> |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
____________________________________________________
| <tr class="category" id="cat2">Category Two</tr> |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
我想做的一件事是将视口顶部的.category
行的ID附加到window.location
。这个jQuery在Chrome 34和IE中工作,但在FF 28中,它会导致"冒泡"行为,即即使用户不断向下滚动,浏览器也会试图跳回来将元素放在视口的顶部。我在这里注释掉了preventDefault
,因为尽管它修复了FF中的跳转,但它也阻止了脚本在到达第一个.category
元素后更新哈希。有没有人在FF中更新location.hash
时遇到过类似的问题,或者知道如何修复它?
$( '.category').waypoint(function() {
//strip current hash from window.location
window.location.hash.replace('#','');
//store waypoint element's id
var setHref = $(this).attr('id');
//set id as location.hash
window.location.hash = setHref;
//e.preventDefault();
return false;
}, { context: 'section' });
这是更改location.hash
的核心功能:它会将您滚动到哈希引用的片段。使用location.hash
无法绕过它。
对于相当现代的浏览器,您可以使用pushState或replaceState来操作URL和导航历史记录,而不会导致跳转到新推送的文档片段。