Как сделать скролл, при этом не блокируя зону видимости для элементов внутри, кроме основного?

Question

[TTox421]

У меня есть элемент inventory, в котором с помощью грида отсортированы элементы. Эти элементы называются slot. В каждом слоте есть элемент draggable. Я перемещаю draggable по экрану с помощью transform: translate(x,y);
Элемент slot обязательно должен быть ralative, что бы работало width: 100%; heidht: 100%; у draggable.

В чем заключается проблема, я хочу элементу inventory выдать overflow-y: scroll;
Когда мы это делаем, перемещаемые предметы, не будет видно за областью inventory, даже если выдать им position: absolute; т.к они лежат в slot, который уже relative.

Если я создам 2 экземпляра inventory, тогда я не смогу перемещать из одного в другой, т.к предмет будет исчезать.
Когда я начинаю перетаскивать предмет, есть переменная transfrom, которая true когда предмет перетаскивается и false когда статичен.

Так вот, как мне решить проблему, что бы при перетаскивании, предмет каким то образом, переставал быть внутри скролла.

Вот пример кода - https://codepen.io/yjwkyrzo-the-selector/pen/PoXMpMg
Видео для понимания - https://youtu.be/BPNYa7DCwmE