Question

我正在使用锚点实现导航，触发一些Javascript滚动到指定元素，暂时在iOS（Iphone 4）上测试它。

这是不是一个新主题，在我决定重新打开这个问题之前，我做了很多研究，但没有用。然而，我的设置也与众多其他设备有所不同，因为我首先在水平导航上转换，然后在平滑滚动后触发。我想知道这种组合是否会引发这种“越野车”行为。是什么让我不相信这是等待转换完成并不能解决问题的事实（既不使用回调函数也不使用window.setTimeout）。

使用 .scrollTop 只需让浏览器跳转到该元素即可。然而，导航的过渡是顺利的。

使用 .animate ，导航的转换非常滞后。当我应用一个非常慢的动画时，它“仅”滞后直到导航过渡完成（或之后的几毫秒），而滚动的最后部分非常流畅（这给了我一些希望）。

.translate3d CSS选项工作正常，但页面被“剪切”，因此我无法在转换完成后向后滚动。对于全屏页面，这更像是一种解决方案。

我不想要知道如何实现触发滚动的锚点，我问是否有人知道实现滚动的平滑方式（在我的情况下为iOS）。意思是，我意识到我可以编写JS-Function更通用，但这只是目前的测试代码。

我没有在Android上对此进行测试，因为我的目标设备是iOS，但如果这只是iOS的已知问题（例如它正在使用android），如果你告诉我，我会很高兴。

JavaScript / jQuery：

$('#my-link').click(function (event) {
    scrollTo('element'); /* hand crafted for now */
    event.preventDefault();
});

function scrollTo (element) {
    navToggle(); /* This toggles classes on various elements, triggering the respective element's transition  */
    $('html, body').animate({
        'scrollTop': $('#'+element).offset().top /* I deleted the callback (on navToggle) and setTimeout code as it did not make a huge difference to the result */
    }, 666);
}

HTML：

<!-- typed out by hand, if there are minor errors they are not related to the issue -->
<a href='#element' id='my-link'>Click to scroll</a> 
...
<div id='element'>...</div>

提供代码实际上只是礼仪的一部分，因为我没有寻找我所写内容的具体改进。然而，这在桌面浏览器上就像一个魅力，如果它对你们中的一些人有所帮助，那就更好了。另请查看this question on how to implement anchor scrolling，因为它为桌面浏览器提供了很好的答案！

已经晚了（或早了），我的脑子一团糟，但我希望我的问题清楚（如果不是我会回来编辑它。）：有没有办法制作移动浏览器（例如iOS） 'Safari）光滑的滚动像魅力？如果已经解决了，请指出正确的方向。

非常感谢并且编码很快！

Javascript - 平滑滚动到移动设备上的元素

0 个答案: