Для реализации скроллирования без блокировки видимости других элементов можно использовать CSS свойство "overflow:scroll" для контейнера, который содержит основной контент. Это создаст скролл-бары внутри контейнера, позволяющие пользователям прокручивать его содержимое, не затрагивая другие элементы на странице.
Чтобы реализовать скроллинг элемента inventory и одновременно позволить элементу draggable выходить за его границы при перемещении, можно использовать JavaScript для обработки событий скроллирования и перемещения элемента.
Сначала нужно добавить обработчик события скролла к контейнеру inventory. При каждом скроллировании контейнера, нужно изменять позицию draggable элемента в противоположную сторону скролла. Например, если пользователь скроллит контейнер вверх, элемент draggable должен перемещаться вниз и наоборот.
Следующим шагом будет добавление draggable функциональности к элементу. Можно использовать HTML5 Drag and Drop API или библиотеки, такие как jQuery UI Draggable, чтобы достичь желаемого эффекта. При перемещении draggable элемента, нужно проверять его позицию относительно границ контейнера inventory и, если он выходит за пределы, перемещать его соответствующим образом, чтобы достичь желаемого вида.
Создание кастомного скролла может быть сложным и требующим много работы, поэтому, вероятно, будет проще использовать стандартные возможности браузера для скроллирования, как описано выше.