我在插件 (pixelcog parallax.js) 中使用视差滚动,它在默认浏览器滚动条上运行良好,但我在我的网站上使用自定义滚动条插件,但视差未运行。我尝试了以下代码。
HTML:
<body>
<section class="hobies-wrapper" data-parallax="scroll" data-image-src="images/parallax-img2.png"></section>
</body>
Javascript:
function myCustomFn(el){
$('.hobies-wrapper').parallax({imageSrc: 'images/parallax-img2.png'});
};
$(document).ready(function ()
{
$("body").mCustomScrollbar({
theme:"minimal",
mouseWheel:{ enable: true },
keyboard:{ enable: true },
mouseWheel:{ invert: true },
documentTouchScroll: true,
scrollEasing:"easeInOut",
scrollButtons:{
enable:true
},
callbacks:{
onScroll:function(){
myCustomFn(this);
}
}
});
});
最佳答案
parallax.js 只检测窗口滚动,不检测任何自定义滚动条。
parallax.js 不是必需的。根据 this page尝试通过 CSS
创建“视差”滚动效果关于javascript - 使用自定义滚动条进行视差滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48971236/