Задать вопрос
@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
  • Вопрос задан
  • 51 просмотр
Подписаться 1 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Frontend-разработка на React
    10 недель
    Далее
  • ProductStar
    Разработка на React
    6 недель
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
ITK academy Екатеринбург
от 50 000 до 90 000 ₽
от 250 000 до 300 000 ₽