Обтекание текстом фиксированного блока?

Question

[andrey16022020]

Подскажите пожалуйста, как сделать так, чтобы текст обтекал div блок? Возможно на JS? В процессе прокрутки текста блок должен оставаться на своем месте

На рисунке кольцевой индикатор и 4 кнопки. Все вместе кнопки и индикатор находится в div, который имеет фиксированное положение и парит над текстом. Текст можно прокручивать отдельного от div с кнопками и индикатором, но при это текст не должен скрываться за этим div. Т.е. текст заканчивается сверху и продолжается сразу за div без потерь.
Пример прототипа пока без обтекания: https://jsfiddle.net/hcpumLt3/

Comments

[Kovalsky]

Индикатор болтается только в этом блоке с текстом или на странице присутствуют также другие блоки в которых он должен так себя вести?

Пока что идея не очень адекватная: в вёрстке сделать этот блок фиксированным (position: fixed например), скриптом создавать копию этого блока и менять её положение в зависимости от положения оригинала.

[andrey16022020]

Kovalsky, другие блоки тоже есть, конечно. Думаю, что это не совсем удачный вариант, поскольку не решается вопрос с обтеканием блока с кнопками и индикатором текстом. Текст должен заканчиваться наверху блока и продолжаться после блока не перекрываясь им

[Kovalsky]

andrey16022020, как раз только этот вопрос и решается, больше ни для чего не нужно создание копии индикатора: эта копия динамически перемещается прямо в блоке с текстом и обтекается текстом. Задумка конечно слегка шизофреничная, но это вполне возможно реализовать. Ждём чо еще народ придумает

Вот типа пример - https://jsfiddle.net/lucifer63/Lgth4abu/2/ . Видите, градус шизофрении очень высок. Придётся этот блок раскидывать прямо в текстовых нодах соответствующих элементов

[Ankhena]

Kovalsky, только "копия" должна быть span'ом.
Но даже в таком случае она может неудачно попасть внутрь другого тега.

Answer 1

[Ivan Bogachev]

На CSS такое обтекание никак не сделать. Но можно пойти одним весьма хитроподвывернутым способом - продублировать текст и скроллить два блока с контентом одновременно. Как в этом примере, только в одной плоскости, без "перевернутой" трансформации:



Это позволит сделать плавное движение, без рывков при перестроении элементов в DOM-дереве.

Comments

[Kovalsky]

Не зря я Богачёва звал!

Я же правильно понимаю, что речь о том чтоб сверху от блока показывать оригинал текста, а снизу - копию?

[Ivan Bogachev]

Kovalsky, можно и в обратную сторону - снизу оригинал, а сверху копию. Тут это не так принципиально.

[andrey16022020]

Всем спасибо, но пока ожидал ответ, концепция поменялась: вместо кольцевого индикатора будет использоваться линейный и кнопки и индикатор будет выстроены в ряд внизу страницы, без перекрытия текста