Is it possible to change the autoscroll offset when dragging?

I have a single-page app written in Vue.js. The UI comprises three main elements:

• a navbar with position: fixed at the top and z-index: 2
• a sidebar with position: fixed on the left and z-index: 1 and padded to account for the presence of the navbar
• a central area, padded to account for the presence of the other fixed elements.

The sidebar is scrollable with overflow-y: auto. Some elements in the sidebar, that I designated here with the text item X, are draggable.

Normally, when dragging towards the edges of a scrollable area, the area will automatically scroll in that direction. In my application the sidebar does not auto-scroll, because the upper edge is hidden by the navbar.

An obvious solution would be to change the structure of the sidebar so that its upper edge lies visible instead of being one top-padded div. However this might break other things.

Question: I would like to know if there's a way to trigger auto-scroll on drag when the mouse is arbitrarily close to the edge, e.g. $navbarHeight pixels.

I'm looking for a pure HTML5 solution, vanilla js, or something with my current framework (Vue.js v3).

What I already tried: I've done a great deal of googling but I'm probably using the wrong search queries: "auto scroll while dragging", "scroll sensitivity area", "autoscroll offset", and several combinations of quotes did not yield relevant results.

JS Fiddle: https://jsfiddle.net/7f5wh1mj/4/

What the page looks like (see the fiddle for a working example):

from Is it possible to change the autoscroll offset when dragging?