伙计们!
我即将准备好完成一个网站,而这个最后的小故障让我很伤心。我所需要的只是一些简单的……链接。在我的桌面(PC/Apple/Firefox/Brave/Safari)上,它按预期工作。在我的带有 Brave 和 Safari 的旧 iPhone 7 上,它也可以正常工作。但是,在我妻子的带有 Chrome 的三星 Galaxy S10 上,它很挑剔。如果链接相对靠近视口,它会滚动到目标 div 就好了。但是任何超过几个屏幕的东西,在目标甚至可见之前就停止了。如果我再次单击该链接,它将完成滚动,并降落在应有的位置。到达目标 div 后,浏览器可以从页面上的任何位置再次滚动到它,但在初始单击之前,它会停止中途。我要疯了吗?(不太可能……)
我尽我所能寻找解决方案,并尝试了几种变体:
- Using <a name="#target">
- Using <a name="target">
- Using <div id="target">
- Using the $('document, html').scrollTo() jQuery function
- Messing with $(window).scrollTo()
- Tried removing any css relative positioning from the design
我什至尝试了一个彻底的破解,谢天谢地(遗憾的是)没有奏效。我做了一个小动画链,在初始 scrollTo() 动画完成后,一个 delay()(测试的短和长)启动,然后是另一个 scrollTo(),希望模拟我作为人类用户必须做的事情让它完成卷轴。奇怪的事情发生了 :) 它开始滚动,在动画期间迅速卡住并在原地抖动,然后突然跳到最终(不完整的)目的地。同样,除了 Chrome 中的三星 Galaxy(无论是桌面模式还是移动模式),所有解决方案在我测试的所有东西上都运行良好。
我只是一名音乐教授,试图为我的妻子建立一个网站,所以任何指针、想法,甚至只是拍拍“这是一个 Android/Chrome 的东西”都会很棒。随意访问该站点并查看源代码(它绝不是完整的/原始的。我仍然需要做很多小事情来整理、非硬编码等。即,请给我一些怜悯;)
https://www.musicalbeginnings.academy
提前致谢!