Я пытаюсь реализовать следующий дизайн. Каждый элемент визуально выглядит как одна строка и должен прокручиваться как таковой, но правила реализации доставляют мне здесь проблемы. Правила следующие:
- При необходимости весь список должен прокручиваться по оси Y (
overflow-y: auto
), обозначенной крайней правой полосой прокрутки. - Правая половина (с радиобоксы) должны прокручиваться по оси X, обозначенной нижней полосой прокрутки
- Нижняя полоса прокрутки всегда должна быть видна при необходимости (
overflow-x: auto
)
Принимая эти правила Принимая во внимание, я решил сделать две панели. Один слева для текстов и один справа для x-scrolling rad ios. У меня в основном он работает в каркасе, однако нижняя полоса прокрутки всегда находится внизу радио, не всегда видна. Я знаю, что не могу сделать полосу прокрутки липкой, поэтому я немного застрял, как это реализовать.
Вот мой код (это грубо, но это всего лишь PO C)
Мне также интересно, лучше ли использовать этот подход. В идеале я строю строку как настоящую, без разделенных панелей, но я все равно застреваю на правой полосе прокрутки по оси X. Идеальным решением было бы без JS, но не обязательно блокировщика.
Несколько других подходов, которые я пробовал:
- Сделайте левую панель липкой, но по оси Y правило прокрутки не соблюдается.
- Установите высоту правой панели как высоту контейнеров, но тогда она не будет прокручиваться влево.
- Сделайте обе панели прокручиваемыми и используйте JS, чтобы прокрутите оба, но это кажется тяжелым с крайними случаями (прокрутка неправильной стороны)
Изображение реализации
Я бился головой это изрядно, и пришло время попросить о помощи. Был бы очень признателен, если бы кто-нибудь мог указать мне правильное направление или исправить мой подход!