@IvanGrishov
Начинающий Frontend разработчик

Как автоматически переместить блок в видимую часть окна браузера?

У меня есть блок, в котором при наведении на квадраты появляется текст под этим квадратом.

Мне нужно сделать так, чтобы при наведении на крайние квадраты (слева и справа которые) блок с текстом был полностью виден. И чтобы работало на адаптиве, например на 768.

Я, конечно, могу задать классы этим крайним элементам и сместить текст вручную, но дело в том, что на адаптиве, крайние блоки будут уже другие. Хочется сделать без костылей, но не понимаю как. Может есть способ, чтобы определять, что блок находится вне зоны окна и перемещать его автоматически? Спасибо за ответ.

https://jsfiddle.net/IvanGrishov/18rwemg3/16/

  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
В данный момент задачи такого рода решаются с помощью JavaScript и математики:
Вычисляете размеры блока, смотрите размеры окра, смотрите положение блока. Если он как-либо вываливается за пределы видимой области -- сместить блок в сторону. Есть и готовые библиотеки для этого. Например popper.js
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы