使用Stellar.js+Bootstrap v4+jQuery 3.2.1报错求助（附JSFiddle链接）

这个问题我之前碰到过，本质是Stellar.js与jQuery 3.x的兼容性冲突——Stellar是比较早期的视差滚动插件，开发时针对的是旧版jQuery（比如1.x/2.x），而jQuery 3.x移除了一些内部兼容方法，其中就包括导致你报错的getClientRects相关封装，没引入jQuery Migrate的话，这些方法就找不到了。

下面给你几个可行的解决思路：

方法一：快速引入jQuery Migrate（最简单的临时方案） #

如果你不想改动插件源码，可以直接在jQuery之后、Stellar.js之前引入jQuery Migrate 3.x版本，它会自动补全jQuery 3.x移除的旧API，让Stellar.js正常运行：

<!-- 先引入jQuery 3.2.1 -->
<script src="path/to/jquery-3.2.1.min.js"></script>
<!-- 再引入jQuery Migrate 3.x -->
<script src="path/to/jquery-migrate-3.4.0.min.js"></script>
<!-- 最后引入Stellar.js -->
<script src="path/to/jquery.stellar.min.js"></script>

方法二：修改Stellar.js源码（更彻底的解决方案） #

如果不想依赖jQuery Migrate，可以直接修改Stellar.js里的问题代码：

1. 打开Stellar.js的源码（压缩版的话找对应的代码片段），搜索getClientRects相关调用。
2. 你会发现代码里可能直接在jQuery对象上调用了getClientRects()，比如类似elem.getClientRects()的写法，这在jQuery 3.x里已经不支持了。
3. 把它改成调用原生DOM元素的方法，比如：

   // 原来的错误写法
   var rects = elem.getClientRects();
   // 修改后的正确写法
   var rects = elem[0].getClientRects();
   

   先确保拿到原生DOM节点再调用方法，就能绕过jQuery的兼容问题。

方法三：替换为更现代的视差插件（长期方案） #

Stellar.js已经很久没有维护了，如果你想避免后续更多兼容性问题，可以考虑替换为更活跃的视差滚动插件，比如：

• Parallax.js：轻量且兼容现代jQuery版本
• ScrollMagic：功能更强大，支持复杂的滚动动画，也能很好地配合Bootstrap 4使用

内容的提问来源于stack exchange，提问作者Farkas Imre