Чтобы реализовать скроллирование без блокировки видимой части страницы для элементов, кроме основного, вы можете использовать свойство CSS `pointer-events: none;` для поддержки перемещения элементов, даже когда они находятся за пределами видимой части страницы. На практике это означает, что вы можете перемещать элементы, но все другие действия, такие как щелчки или прокрутка, будут обрабатываться основным элементом страницы.
Чтобы перемещаемые предметы оставались видимыми за пределами области прокрутки при использовании свойства `overflow-y: scroll;` для элемента inventory, вам нужно установить для этого элемента свойство `position: fixed;`. Это позволит элементам оставаться видимыми независимо от прокрутки содержимого.
Пример кода CSS:
```css
#inventory {
overflow-y: scroll;
position: fixed;
max-height: 200px; /* Установите максимальную высоту для отображаемой области */
}
.inventoried-item {
pointer-events: none; /* Позволяет перемещать элементы без блокировки видимой части страницы */
}
```
Пример кода HTML:
```html
<div id="inventory">
<div class="inventoried-item">Предмет 1</div>
<div class="inventoried-item">Предмет 2</div>
<div class="inventoried-item">Предмет 3</div>
<!-- и так далее -->
</div>
```
Заметьте, что этот код только демонстрирует основные принципы решения задачи. Вам может потребоваться дополнительная настройка, чтобы точно соответствовать вашим требованиям и макету.