Как отменить наложение текста при скролле CSS?
Добрый день, есть такая страница в которой находится информация о авторе, на мобильной версии заказчик просит добиться следующего результата при скролле текста: https://streamable.com/4cvcgq (Это готовая версия приложения для iOS, я делаю веб аналог).
Вот мой код, HTML:
<div class="curator__info"> <div class="curator__details" > <h1 class="curator__name" v-text="curator.name"/> <p class="curator__about" v-text="curator.about"/> </div> </div> |
<div class="curator__info"> <div class="curator__details" > <h1 class="curator__name" v-text="curator.name"/> <p class="curator__about" v-text="curator.about"/> </div> </div>
И вот стили:
.curator__info { position: absolute; height: 100%; bottom: 0; z-index: 2; padding: 2rem; flex-direction: column; justify-content: flex-end; overflow: hidden; } .curator__details { flex: auto; position: relative; flex: 0 1 80%; bottom: 50px; overflow-y: auto; padding-top: 55%; } .curator__name { margin-bottom: 1.5rem; position: sticky; top: -86%; } |
.curator__info { position: absolute; height: 100%; bottom: 0; z-index: 2; padding: 2rem; flex-direction: column; justify-content: flex-end; overflow: hidden; } .curator__details { flex: auto; position: relative; flex: 0 1 80%; bottom: 50px; overflow-y: auto; padding-top: 55%; } .curator__name { margin-bottom: 1.5rem; position: sticky; top: -86%; }
Вроде результат то что надо, и без JS обходится, но есть одна единственная проблема которую никак не получается решить, текст curator__about (описание) залазит под curator__name (имя куратора), вот видео: https://streamable.com/ov2n2b
Надо как то запретить текстам накладываться друг на друга, простым решением будет дать фон элементу curator__name, и тогда не будет видно этого накладываемого текста, но так нельзя. Буду рад если сможете помочь)
Вот ссылка на сайт https://devsite.rovr.live/#/, можете глянуть тыкнув на фотку или на имя:
Дополнительно:
видеол недоступны, задача неясна
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для отмены наложения текста при скролле в CSS, можно использовать свойство `overscroll-behavior`. Это свойство позволяет контролировать поведение скроллинга на элементе при достижении его краев.
Применение этого свойства к элементу позволит избежать наложения текста при скролле. Например, если у вас есть элемент с классом `scrollable`, вы можете добавить следующие стили:
.scrollable { overscroll-behavior: contain; }
Этот код обеспечит плавный и естественный скроллинг без наложения текста при достижении краев элемента.
Также, если вы хотите предотвратить наложение текста только на горизонтальной или вертикальной оси, вы можете использовать значения `none` или `auto`:
- `overscroll-behavior-x: none` - отменит наложение текста по горизонтали.
- `overscroll-behavior-y: none` - отменит наложение текста по вертикали.
Надеюсь, это поможет вам решить проблему с наложением текста при скролле на вашем сайте. Если у вас есть дополнительные вопросы, не стесняйтесь задавать!