Question

我对某些图像具有滚动效果，有些图像具有放大效果，请使用水平，垂直滚动以及其他一些效果。除非发生以下两种情况之一，否则滚动动作不会被初始化：1）重新调整浏览器窗口的大小（宽度或高度）。 2）您再次访问该页面或页面已刷新。所有浏览器都在发生这种情况。

编辑：某些滚动效果似乎已初始化，但在其进入视口之前会触发（因此看不到它）。

示例视频：

如何复制：https://www.youtube.com/watch?v=U9vlteH691U
示例1：https://www.youtube.com/watch?v=a9YGIkgRF_Q
示例2：https://www.youtube.com/watch?v=JgSKObKfVOU

注意：如果您希望多次复制问题，则必须访问带有隐身页面的页面。如果它再次开始工作，请尝试使用新的浏览器或新的标签。

具有受影响的滚动的页面URL（大多数部分位于“网页设计”下）：

https://rory-dwyer.com/hk-electrical-engineers/ -带有笔记本电脑，手机和网站屏幕截图的部分

https://rory-dwyer.com/simpliii/ -在品牌元素和视频之间

https://rory-dwyer.com/bridge-city-ballroom-dance/ -电话入口动画，网站截图

https://rory-dwyer.com/jgarloff-design/ -电脑，电话和网站的屏幕截图

https://rory-dwyer.com/apo11o/ -网页设计下的手机

我尝试过的事情：

禁用所有插件
使用股票主题
禁用页眉和页脚脚本注入
删除Elementor Nav和Footer部分
搜索并替换http-> https
从头开始重建页面（使用Elementor中制作的页面模板）
回滚Elementor版本
从头开始在实时服务器（而不是本地环境）上重建站点
禁用所有全局模板
删除所有自定义CSS和JS

Answer 1

转到 Jetpack 插件中的 Jetpack 设置。转到“性能”选项卡。向下滚动页面并禁用“延迟加载”

Image of disabled "lazy loading" in the Jetpack plugin.

Answer 2

对于那些有此问题的人可以尝试一下。

如果您使用的是Windows 10，则可能已关闭show animations on windows。通过Windows 10中的设置display settings将其打开。

Answer 3

找到你的Elementor的css文件frontend.min.css并删除这部分css：

@media (prefers-reduced-motion:reduce) {
    .animated {
        -webkit-animation: none;
        animation: none
    }
}

这部分 css 告诉浏览器如果操作系统更喜欢减少运动，则禁用动画，因此删除这部分 css 将强制动画在所有操作系统上显示。如果您想保留这部分 css 并希望在您想要的某些 PC 上显示它，那么您可以在该 PC 的设置中打开动画 - 要在 Windows 10 上打开动画，请转到设置 > 轻松访问 > 显示 > 简化和个性化 Windows，然后打开在 Windows 中显示动画。

Elementor-在调整窗口大小之前，滚动“运动效果”不起作用

3 个答案: