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

$.noConflict();
    jQuery( document ).ready(function( $ ) {

      $(".panel").on("mouseenter", function(){
        $(document).on("scroll", function(){
           $(this).scrollTop(0); 
        });
    });
    
    $(".panel").on("mouseleave", function(){
        $(document).off("scroll");
    });
    });