滑动移动问题(Iphone)

Question

当我在手机上滑下/爬上我的网站时，第一张幻灯片是错误的，看上去是朝正确的方向滑动，然后返回几个px到另一个方向(但只有新方向上的第一张幻灯片有这个问题)。我认为更好的方法是在手机上测试：https://even-mind.com

我怎么才能修好它？希望你们能帮我伙计们！

目前，我发现的唯一一件事是删除owl-carousel.js脚本，这样滑行就变得平滑了，但是旋转木马当然不能工作，您可以在这里看到它：https://dev.even-mind.com/Even-Mind。

(在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

嗯，当我到达“我们是”的幻灯片时，我看到了马车/滞后卷轴。

可能是fadingIn文本的动画从那里开始，这使得它充满了缺陷，我的建议是：

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

考虑删除任何不必要的动画，脚本，链接等。例如，我不认为这些fadeIn动画在所有文本上的意义。如果你有他们只是为了让网站看起来不成问题，但我建议使用动画只是为了用户体验的性能。示例:在希望用户看到的特定元素上使用fadeIn或任何类型的动画。动画让眼睛注意到它，用户会立刻观看动画并关注信息。

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

4- G-zip

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，请考虑做上述说明+链接说明！

Answer 3

可能是移动浏览器在处理滚动事件时遇到了一些问题。尝试使用一个取消函数来限制计算的数量，在你的滚动，使一个更流畅的动画，并可能解决你的滚动问题。

The函数限制了函数被调用的次数。非常方便滚动事件等。

一个基本的例子(来自David的博客)：https://davidwalsh.name/javascript-debounce-function

 function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

您可以在您的站点上使用它。

var handyScrollFunction = debounce(function() {
    // put your scroll/parallax in here
}, 250);

window.addEventListener('scroll', handyScrollFunction);

你可以玩超时，以确保滚动仍然平滑。