JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/leader-line.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/anim-event.min.js"></script>
<div class="box-container">
  <div class="box" id="box1"></div>
</div>

<div class="box" id="box2"></div>

CSS

.box-container {
  height: 300px;
  width: 100px;
  border: 1px solid #000;
  overflow: scroll;
  float: left;
    scroll-behavior: smooth !important;
}

.box {
  width: 50px;
  height: 50px;
  background-color: green;
}

#box1 {
  margin: 200px 20px;
}

#box2 {
  float: left;
  margin-left: 100px;
  margin-top: 100px;
}

JavaScript

var line = new LeaderLine(
  document.getElementById('box1'),
  document.getElementById('box2')
);

document.querySelector('.box-container').addEventListener('scroll', AnimEvent.add(function() {
  line.position();
}), false);