滑动移动问题(Iphone)

Question

当我在移动设备中向下滑动我的网站时,第一张幻灯片是错误的,看起来它向右滑动,然后向另一个方向返回几个px(但只有新方向的第一张幻灯片有这个问题).我认为更好的方法是在手机上测试它:https://even-mind.com

我该如何解决？我希望你能帮助我们!

目前,我发现的唯一一件事是删除owl-carousel.js脚本,因此滑动变得平滑但当然旋转木马不起作用,你可以在这里看到它:https: //dev.even-mind.com /偶心灵

(在iphone 5上测试过)

Answer 1

通过查看您的DOM元素检查可以发现,虽然向下滚动的从头部的位置改变absolute到fixed,也许这是什么原因造成的问题.

这是滚动前的标题:

<div id="header" class="header">

滚动后:

<div id="header" class="header header-fixed header-prepare">

尝试更改HTML并fixed从头开始为标题添加位置:

<div id="header" class="header header-fixed">

Answer 2

好吧，当我到达“我们是”幻灯片时，我看到了有缺陷/滞后的滚动条。

淡入文本的动画可能从那里开始，这使得它有问题，我的建议是：

1- 将所有<link>和<script>标签移到 HTML 底部，就在 后面，</body>让浏览器首先加载 HTML 元素，然后加载链接和脚本。

2-考虑删除任何不必要的动画、脚本、链接等。例如，我在所有文本上看不到这些淡入动画的意义。如果您只是为了让网站看起来更漂亮而不是问题，但我建议仅为了用户体验性能而使用动画。示例：在您希望用户看到的特定元素上使用淡入或任何类型的动画。动画使眼睛注意到它，用户会立即观看动画并关注信息。

3- 一如既往，缩小/压缩您的脚本、CSS 和图像。

4- G 拉链

5- 使用 GTmetrix.com 查看您网站的所有问题

我会更多地查看您的代码，看看是否有任何代码问题。

编辑：

看这里： https: //developers.google.com/speed/pagespeed/insights/? url=https%3A%2F%2Feven-mind.com%2F&tab=mobile

这里： https: //gtmetrix.com/reports/even-mind.com/uVHRlGCl

注意：您的网站大小为 3.04MB，请考虑执行上述说明 + 链接说明！