[英]Uncaught TypeError using stellar.js with jquery 3.1.1
In a single page I'm including only jQuery 3.1.1 and stellar.js for a parallax scrolling effects, but when I try tu use it as $(window).stellar();
在单个页面中,我只包含jQuery 3.1.1和stellar.js用于视差滚动效果,但是当我尝试使用它作为
$(window).stellar();
I get this error in console: 我在控制台中收到此错误:
Uncaught TypeError: f.getClientRects is not a function (jquery-3.1.1.min.js:4)
I tried using the migrate plugin as suggested in many answer, but doesn't solve my problem. 我尝试使用migrate插件,如许多答案中所建议的那样,但并没有解决我的问题。
The snippet is just to show you the error. 该片段只是为了向您显示错误。
$(function(){ $('.main').stellar(); });
<div class="main"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
stellar.js is failing because of this piece of code: 由于这段代码,stellar.js失败了:
$(window).load(function() {
var oldLeft = self._getScrollLeft(),
oldTop = self._getScrollTop();
self._setScrollLeft(oldLeft + 1);
self._setScrollTop(oldTop + 1);
self._setScrollLeft(oldLeft);
self._setScrollTop(oldTop);
});
In jquery 3.0 the load event is removed. 在jquery 3.0中,load事件被删除。 You can change to
on('load', function{});
你可以改为
on('load', function{});
$(window).on('load', function() {
var oldLeft = self._getScrollLeft(),
oldTop = self._getScrollTop();
self._setScrollLeft(oldLeft + 1);
self._setScrollTop(oldTop + 1);
self._setScrollLeft(oldLeft);
self._setScrollTop(oldTop);
});
Here is a "working" fiddle: https://jsfiddle.net/y19x160g/1/ and by working i just say that isn't throwing an error anymore. 这是一个“工作”的小提琴: https : //jsfiddle.net/y19x160g/1/并通过工作我只是说,不再抛出错误。
PS: I don't know exactly what this library is used for. PS:我不确切知道这个库的用途。
In that js fiddle i just copied the not-minified script from current GitHub project: https://github.com/markdalgleish/stellar.js/blob/master/src/jquery.stellar.js and modified the load event. 在那个js小提琴我只是从当前的GitHub项目中复制了未缩小的脚本: https : //github.com/markdalgleish/stellar.js/blob/master/src/jquery.stellar.js并修改了load事件。
Other reference: https://api.jquery.com/load-event/ - see deprecated 其他参考: https : //api.jquery.com/load-event/ - 请参阅弃用
If you don't wan't to change the code in the actual plugin, you can also just add jQuery migrate to the project, I encountered this same issue with the following setup... 如果你不想改变实际插件中的代码,你也可以只将jQuery migrate添加到项目中,我在下面的设置中遇到了同样的问题...
jQuery v3.3.1 jQuery v3.3.1
Stellar.js v0.6.2 Stellar.js v0.6.2
Adding jquery-migrate/3.0.1 to the project fixed the issue. 将jquery-migrate / 3.0.1添加到项目修复了该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.