Readymag中使用Eraser.js时滚动与擦除功能冲突的问题求助

嗨，我完全懂你现在的困扰——要让擦除功能正常运行，就得让顶层的图片能接收鼠标事件，但这样又会把下面页面的滚动给挡住；加了pointer-events: none后滚动是正常了，可擦除功能直接罢工，简直是两难！

其实核心矛盾就是顶层图片的事件拦截：默认情况下，z-index:99的#img2会把所有鼠标事件都截下来，下面的页面根本拿不到滚动信号；而pointer-events: none会让图片彻底忽略所有鼠标事件，Eraser.js自然没法捕捉擦除操作了。

给你个动态切换的解决方案——默认让图片不拦截事件（允许滚动），只有当用户开始擦除（按住鼠标/触摸屏幕）时，才临时开启事件接收，擦完再切回去：

修改后的CSS #

.wrapper {
  position: relative;
  min-height: 100vh; /* 确保容器至少覆盖视口高度，避免布局错位 */
}

#img2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: 99;
  pointer-events: none; /* 默认状态下不拦截事件，允许页面滚动 */
}

修改后的完整代码 #

<div class="wrapper">
  <img id="img2" src="https://freight.cargo.site/t/original/i/Z2283582099087810873620708068841/stelline-rettangolo.svg">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://freight.cargo.site/m/K2262565859332669963966899162601/jquery.eraser.js"></script>
<script type="text/javascript">
  $('#img2')
    .eraser({ size: 200 })
    // 当用户开始擦除操作时，开启图片的事件接收
    .on('mousedown touchstart', function() {
      $(this).css('pointer-events', 'auto');
    })
    // 当用户结束擦除（松开鼠标/离开图片/触摸结束），恢复不拦截状态
    .on('mouseup mouseleave touchend touchcancel', function() {
      $(this).css('pointer-events', 'none');
    });
</script>

这个方案的效果是：平时页面可以正常滚动；当你按住鼠标（或触摸屏幕）在图片上擦除时，图片会临时接收鼠标事件，让Eraser.js正常工作；松开鼠标或者移开后，又会回到允许滚动的状态，完美解决冲突~

如果在Readymag里还是有问题，可以检查一下Readymag自带的页面容器有没有额外的事件拦截，或者尝试把这个.wrapper容器放在Readymag页面的最外层，确保层级和事件传递都正常。

备注：内容来源于stack exchange，提问作者Gaia Taverriti