Javascript - 检测div的滚动，工作，但不起作用

我在实践中有一个设计原型（我是JS新手，0级），我的脚本有问题。

我正在检测是否有 div (#derecha），固定尺寸（354px x 210px）触发滚动，效果很好HERE http://jsfiddle.net/m4r13wx8/，但我无法让它发挥作用HERE https://jsfiddle.net/gfoLpr1t/，其中添加了一些克隆的 div ...

The div #derechaCSS 第 26 行有注释。

我究竟做错了什么...？

NOTE 1:原型有LocalStorage。要测试它是否有效，您必须在每次测试中清空浏览器的缓存。

NOTE 2:请参阅第 37 行的 CSS。它必须取消注释。

NOTE 3:对我不起作用的脚本位于 HTML 的第 177 行，它与我在下面发布的脚本相同。

观看现场演示 https://jsfiddle.net/gfoLpr1t/（jsfiddle /这里如果运行片段则不起作用）

提前致谢！

// Displays the new product alert added when the scroll is detected in the div #derecha
var displaced = document.getElementById('derecha')
if (displaced.scrollHeight > displaced.offsetHeight) {
  document.getElementById("notice-product-added").style.display = "block";
};

// LocalStorage for the div #notice-product-added
const showMsgCart = localStorage.getItem('showMsgCarrito');

if (showMsgCart === 'false') {
  $('#notice-product-added').hide();
}
$('#notice-product-added').on('click', function() {
  $('#notice-product-added').fadeOut('slow');
  localStorage.setItem('showMsgCarrito', 'false');
});