在移动问题上滑动（Iphone）

Posted 2023-03-31

【中文标题】在移动问题上滑动（Iphone）

【英文标题】：Sliding on mobile issue (Iphone)

【发布时间】：2016-09-01 23:18:49

【问题描述】：

当我在移动设备中向下/向上滑动我的网站时，第一张幻灯片有问题，看起来它向正确的方向滑动，然后返回几个 px 到另一个方向（但只有新方向的第一张幻灯片有这个问题）。我觉得最好还是在手机上测试一下：https://even-mind.com

我该如何解决？ 希望大家能帮帮我！

目前，我发现的唯一方法是删除 owl-carousel.js 脚本，这样滑动就变得流畅了，但当然 carousel 不起作用，你可以在这里看到： https://dev.even-mind.com/Even-Mind

（在 iphone 5 上测试）

【问题讨论】：

检查您的控制台错误。 Uncaught TypeError: $ is not a function。你的网站没有在 Chrome 桌面上为我加载。

我在 chrome 的控制台上看不到任何错误..

啊，我禁用了我的广告屏蔽扩展，现在网站正在加载...

我无法在您的链接上看到问题。也没有代码，所以即使我们可以在您的链接上看到问题，我们也看不到代码，您希望我们如何提供解决方案？

右键>源代码。我认为这个问题只在iphone上。以防万一有人遇到同样的问题。

【参考方案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">

【讨论】：

我认为这也是问题所在，但即使我从 html 中删除标题，问题也是一样的..

【参考方案2】：

嗯，当我到达“我们是”幻灯片时，我看到了错误/滞后的滚动。

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

1- 将所有 <link> 和 <script> 标记移到 HTML 底部，紧随 </body> 之后，让浏览器先加载 HTML 元素，然后加载链接和脚本。

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

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

【讨论】：

您好，谢谢您的回答。 css & js 已经被缩小了。我们试图删除制作所有动画的动画 css，但没有任何改变。底部的链接也是如此。真正有效的一件事是删除 owl.carousel.js （结果在这里：dev.even-mind.com/Even-Mind ）滑动很顺畅，但轮播当然不起作用......我认为它应该与其他脚本有一些问题或类似的东西。但是如何解决呢？

嗯，当然，问题不在于轮播，因为我在“我们是”看到了小滞后，所以在“关于”部分。所以试试这个：现在删除 animate.css，把 carousel.js 放回去，让它在其他链接的顶部，即使是链接也必须放在正确的位置才能完美工作，这很烦人。继续玩定位，同时我继续挖掘您的代码以找出问题所在。但是当我在手机上刷新网站时，它并没有像以前那样滞后。但我仍然看到滚动延迟了 0.5 毫秒。

【参考方案3】：

可能是移动浏览器在处理滚动事件方面存在一些问题。尝试使用 debounce 函数来限制滚动的计算次数，以使动画更流畅，并可能解决您的滚动问题。

去抖动函数限制函数被调用的次数。对于滚动事件等非常方便。

一个基本示例（来自 David Walsh 的博客）：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);

您可以使用超时来确保滚动仍然流畅。

【讨论】：

谢谢，但我如何在我的网站上使用它？

将其添加到答案中

【参考方案4】：

从 DevTools 时间轴视图中可以看到，顶部有很多红色标记。这些表示慢帧。看截图，你可以很容易地看出滚动本身有一些讨厌的地方。

再深入一点——scroll 事件触发了 2 个函数：

第一个，来自 polyfill.js 的函数调用，它将函数执行委托给 requestAnimationFrame（这很好） 第二个，对jQuery的函数调用，它立即执行函数。

您可以通过将函数 2 委托给 requestAnimationFrame 来提高滚动性能。在最简单的形式中，您可以使用以下内容：

$(window).scroll(function() 
  requestAnimationFrame(someFunctionUpdatingDOM);
)

另一件事是变量缓存。计算标题位置的函数每次调用时都会遍历 DOM。由于 DOM 操作非常昂贵，因此如果没有必要，最好避免它们。

var $header = $('.header'); // traverse DOM once, cache variable for later use in function

function someFunctionUpdatingDOM() 
  $header.addClass('something');

我注意到的另一件事 - 桌面视图也存在滚动性能问题，这是由大量重绘背景图像引起的。这是由脚本更改background-position 以实现视差效果引起的。通常最好使用 CSS 转换，例如 translate3d()，它是硬件加速的。通过这种方式，浏览器可以将图层（图像）转换调度到 GPU，省略不必要的重绘，使页面平滑滚动。

祝修复成功！

【讨论】：

感谢您的分析，但仍然是同样的问题，实际工作的一件事是删除 owl-carousel.js 脚本。这里是没有owl-carousel的版本，滑动流畅：dev.even-mind.com/Even-Mind

尝试在滚动事件上使用去抖动功能，以确保它不会频繁触发。