我在页面上列出了与div ID相关的项目列表。这些项目用作浏览页面的定位链接。当用户滚动到页面的每个部分时,它们也会突出显示。但是,在移动设备上,我还希望列表项可以水平滚动并在用户向下移动页面时滚动到视图中(请参阅屏幕抓取以获得视觉效果)。我以为可以轻松地使用ScrollIntoView来实现此功能,但Safari移动版不能很好地使用它,并且阻塞了页面上的触摸滚动。
这是我当前正在使用的。它可以在Chrome上完美运行。
$(window).scroll(function(){
$('.profile-content > section').each(function() {
var id = $(this).attr('id');
$('#profileNav a').removeClass('active');
$('#profileNav a[href=\\#'+ id +']').addClass('active');
if( $(window).width() < 768 ) {
$('#profileNav a[href=\\#'+ id +']')[0].scrollIntoView({
behavior: "smooth",
inline: "center"
});
}
});
});
关于我可以做什么使其对Safari友好,有何建议?当前,它会破坏触摸滚动(动作笨拙且不流畅),并且Safari忽略ScrollIntoView参数,因此行为和内联均被忽略。谢谢!