Допустим, я хочу иметь элемент-обертку, который отображает один элемент с той же высотой ширины, но при нажатии он перемещается к элементу div рядом с ним, который был за кадром раньше ...
Позвольте мне нарисовать это очень быстро:
Уровень рисования 9000
Таким образом, нажатие на стрелку вправо приведет к перемещению / прокрутке до элемента вне экрана.
Это в основном для моих модалов, которые выглядят так:
<section class="modal--wrapper">
<div class="modal">
/* picture i drew goes here */
</div>
</section>
модальный - оболочка полноэкранного ширины / высоты 100%, положение: фиксированное, в то время как модальное по центру, с максимальной шириной 384px (для мобильных целей)
Я знаю, как написать логику для этого, используя getBoundingClientRect, я просто не знаю, как сделать второй элемент за кадром.
<section class="user">
<section class="user__account">/* ... */</section>
<section class="user__settings">/* ... */</section>
</section>
Где учетная запись пользователя - это то, что я нарисовал, а настройки пользователя - элемент за кадром.
Я попытался установить отображение класса "user": flex и overflow: hidden, но два окна просто появляются одно рядом друг с другом, оба полностью видимы. Даже если я установлю ширину аккаунта и настроек на 384 пикселя (ширина обертки), они оба появятся один рядом друг с другом. flex-based 100% на em тоже не работает. Не знаю, была бы полезна абсолютная позиция, и я полагаю, что это потребует некоторого взлома. Если это путь, я вниз. Просто нужна помощь, с чего начать. Я пытался расположить их так, но это просто не хочет работать: \
Раньше я делал такие вещи, но для элементов, которые прокручиваются вверх и вниз, а не влево и вправо ...