Javascript-检测div滚动，可以正常工作，但不工作

Question

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

我正在检测固定尺寸（354px x 210px）的div（ #derecha ）是否触发滚动，并且效果很好 HERE ，但我无法使其工作 HERE ，在其中添加了一些克隆的div ...

在CSS的第26行上注释了div #derecha 。

我在做什么错...？

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

注意2：，请参阅第37行的CSS。它必须未注释。

注意3：不适用于我的脚本位于HTML的第177行，与我在下面发布的脚本相同。

SEE DEMO LIVE （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');
});