使用自定义滚动条进行视差滚动

Question

我正在使用插件 (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);   
                    }
                    }
                    });
});

Answer 1

parallax.js 仅检测 Window 滚动条，不检测任何自定义滚动条。

parallax.js 没有必要。根据 this page 尝试通过 CSS

创建 "parallax" 滚动效果

使用自定义滚动条进行视差滚动

Parallax scrolling with custom scroll bar

html

javascript

jquery

scroll

jquery-plugins