Infinite scroll draggable jquery

Question

Can you please tell me if it is possible to set the maximum scroll size of the #content element. At the moment, if you drag #element, the horizontal scroll will be infinite. I cannot get the scrollLeft of the #content element when dragging because I use sortable, there is no such functionality.

$(function() {
  $("#element").draggable({
    scroll: true,
    drag: function(event, ui) {
      console.log($("#content").scrollLeft());
    }
  });
});

#content {
  width: 500px;
  height: 150px;
  background: red;
  position: relative;
  overflow: hiden;
  overflow-y: scroll;
}

#element {
  background: black;
  width: 100px;
  height: 100px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="content">
  <div id="element"></div>
</div>