JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel"><div class="content"><object width="100%!important" align="right"><script id="cid0020000095434923836" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 300px;height: 300px;">{"handle":"smilepeople","arch":"js","styles":{"a":"181818","b":100,"c":"e0e0e0","d":"e0e0e0","e":"cccccc","h":"cccccc","k":"181818","l":"181818","m":"181818","n":"FFFFFF","q":"181818","r":100,"t":0,"sbc":"000000"}}</script></object></div></div>
<div class="placeholder"></div>

CSS

.placeholder {
  width: 100%;
  height:5000px;
  background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(83,203,241,1) 40%,rgba(0,0,0,1) 100%);
}

.panel {
  position: absolute;
  width:300px;
  height:300px;
  border: 2px solid black;
  left:200px;
  top:50px;
  box-shadow: 0 0 2px 2px black;
  overflow: hidden;
}

.content {
  width: 100%;
  height: 100%;
}

JavaScript

var panel =  $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
    doc.scrollTop(currentScroll);
  }
function stopDocScroll(){
  currentScroll = doc.scrollTop();
  doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
  doc.off('scroll', resetScroll);
}

panel.on('mouseenter', function(){
  stopDocScroll();
})
panel.on('mouseleave', function(){
  releaseDocScroll();
})