#html #css
#HTML #css
Вопрос:
У меня есть этот аккордеон, который в основном состоит из внешнего div с набором height и overflow-y: hidden и внутреннего div с динамическим контентом, загружаемым из CMS (и кнопки для удаления правил высоты и переполнения из внешнего div, очень упрощенного).
Иногда содержимое во внутреннем div содержит встроенное видео Youtube (iframe). Всякий раз, когда видео Youtube «отключается» внешним div overflow-y: hidden , возникает проблема. Когда вы начинаете взаимодействовать с видео, фокусируясь на нем, нажимая play, stop и т. Д., Видео прокручивается в поле зрения, и любой контент, размещенный над видео, может исчезнуть над верхним краем внешнего div, став невидимым. Невозможно прокрутить его обратно в поле зрения, так как внешний div имеет overflow-y: hidden , который отключает прокрутку, как и ожидалось, но, по-видимому, не при фокусировке на видео.
Есть ли способ предотвратить прокрутку divs при фокусировке видео? По-видимому overflow-y: hidden , этого недостаточно. Я столкнулся с этой проблемой в Chrome. В Firefox, похоже, по умолчанию он работает нормально — при просмотре видео прокрутка не происходит.
Если возможно, я ищу решение только для CSS, желательно без JS.
Я создал codepen, чтобы проиллюстрировать проблему, в которой вы можете увидеть ее в действии: https://codepen.io/monodrive/pen/poEraWK
Очень упрощенный код выглядит следующим образом (функциональность аккордеона была полностью исключена, поскольку она не имеет отношения к воспроизведению этого поведения).
HTML:
<div class="outer">
<div class="inner">
Hello there. This text comes from the inner div. It will scroll out of the viewport once you start interacting with the Youtube video below, and cannot be scrolled into view again. Can the initial scroll be prevented? (seems to happen in Chrome only)<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DWcJFNfaw9c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
CSS:
.outer {
max-height: 250px;
overflow-y: hidden;
border: 1px solid green;
}
Комментарии:
1. Я не уверен, что есть простой способ избежать автоматической прокрутки видео после его воспроизведения. Это похоже на крошечную оптимизацию UX из браузера. Но есть одна вещь, которую я не понимаю в пользовательском интерфейсе в демо: почему нет прокрутки, и в то же время внутреннее содержимое больше, чем область просмотра. Я думаю, что проблема есть. Пользователь видит контент, но не может нормально взаимодействовать с ним.
2. Может быть, правильным решением является «переполнение: авто» или «переполнение: прокрутка». Но я думаю, что вы сделали это намеренно. Итак, за этим стоит идея. Не могли бы вы пояснить, почему использовался «overflow: hidden»? Теперь я могу предложить вам только это: добавьте обработчик «onClick» в тег iframe. В обработчике событий прочитайте «scrollTop» контейнера. Затем на следующем тике (например, setTimeout) восстановите его.
3. @faiwer есть причина для моего «переполнения: скрытого» — предполагается, что макет внутреннего / внешнего div представляет собой аккордеон, где все содержимое переменной высоты присутствует во внутреннем div, но частично скрыто «overflow: hidden» в сочетании с максимальной высотой навнешний div. Я опустил код для расширения аккордеона, просто чтобы упростить пример. Я думаю, что вы правы, это, вероятно, неясный способ браузера попытаться «помочь» с UX.
4. @faiwer очень похожая проблема может возникнуть, если в скрытом контенте есть ссылки (a-теги), и вы будете использовать клавишу tab для навигации. В конечном итоге скрытая ссылка будет прокручиваться в поле зрения при фокусировке, и не будет возможности вручную прокрутить обратно к началу внутри div. Я смягчил это, установив tabindex=»-1″ для всех скрытых ссылок с помощью небольшого скрипта, является ли это хорошим решением или нет, это другое обсуждение, но, возможно, было бы проще визуализировать проблему, думая о ссылках вместо встраивания Youtube.
5. @faiwer предполагается, что это аккордеон с кнопкой «показать больше» внизу, т. Е. Часть содержимого видна с самого начала, а затем есть кнопка, которую нужно нажать, чтобы просмотреть все это. Я не уверен, что смогу объяснить это лучше. Я думаю, что это не редкость, часто встречающаяся на страницах продуктов на сайтах электронной коммерции и т. Д. В любом случае ваше предложение javascript похоже, что оно может это исправить, поэтому я попробую. Спасибо!