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

标签 javascript jquery html scroll jquery-plugins

我在插件 (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/

相关文章:

php - 如何将值从 Jquery 传递到 PHP? HTML 是一个隐藏的输入表单字段

jquery 在调整窗口大小时计算元素大小

javascript - ASP.NET 服务器控件 - 根据下拉选择显示隐藏文本框

javascript - 如何在 JS 执行后延迟 CSS 和脚本加载

html - 为什么位置的 div 默认值是静态的而不是相对的?

javascript - 如果类处于事件状态,则更改 div 上的文本

jquery - 如何阻止 iOS 文本字段自动完成干扰 jQuery 自动完成?

javascript - 在 PHP 中删除 HTML 中的所有样式属性

javascript - 当 xaxis 是文本时,如何显示 jqplot 堆积条形图?

javascript - 在 node.js 中获取 *current* 堆栈跟踪(例如,通过 SIGINT)