问题描述
我在 wordpress 网站上使用 locomotive.js (https://locomotivemtl.github.io/locomotive-scroll/)。 在我上传到实时服务器之前,它运行良好。在实时服务器上,元素有时会相互碰撞,然后闪烁并消失,页脚也被切断。
我认为这一定与页面未加载有关,我需要使用 update() 来检查页面是否已加载。但我不确定如何更改它以检查页面加载而不是超时 - 任何人都可以帮忙吗?
function smooth() {
let scrollContainer = document.querySelector('your-selector');
scroll = new LocomotiveScroll({
el: scrollContainer,smooth: true });
setTimeout(() => {
scroll.update();
},500);
}
解决方法
我们必须检测要加载的图像和大型资产您应该使用 imageLoaded 来检测所有图像加载,然后您必须更新滚动条,它应该可以正常工作
const imagesLoaded = require("imagesloaded"); // import the library or can use cdn
let scrollContainer = document.querySelector("[data-scroll-container]");
var scroll;
scroll = new LocomotiveScroll({
el: scrollContainer,smooth: true,getSpeed: true,getDirection: true,offset:["15%",0]
});
/* update scroll (height) when all images are loaded */
imagesLoaded(scrollContainer,{ background: true },function () {
scroll.update();
});