JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magnetic.js"></script>

<div class="container">
    <div class="content">
         <div class="object"></div>
    </div>
</div>

CSS

.container{ 
    width: 600px; 
    overflow-y: scroll;
   padding: 20px; 
    margin: 20px;
    border: 1px solid #ccc;
}

.content{
    width: 4000px;
    height: 400px;
    position: relative;
}

.object{
  position: absolute;
    height: 400px;
    width :100px;
    background: red;
    left: 200px;
}

JavaScript

$(function() {

    $('.container').magnetic({
        selector: '.object',
        left: 180,
        right: 500
    });

});