Два бок о бок прокручиваемых div, горизонтальная прокрутка всегда видна - PullRequest
0 голосов
/ 27 мая 2020

Я пытаюсь реализовать следующий дизайн. Каждый элемент визуально выглядит как одна строка и должен прокручиваться как таковой, но правила реализации доставляют мне здесь проблемы. Правила следующие:

  • При необходимости весь список должен прокручиваться по оси Y (overflow-y: auto), обозначенной крайней правой полосой прокрутки.
  • Правая половина (с радиобоксы) должны прокручиваться по оси X, обозначенной нижней полосой прокрутки
  • Нижняя полоса прокрутки всегда должна быть видна при необходимости (overflow-x: auto)

Принимая эти правила Принимая во внимание, я решил сделать две панели. Один слева для текстов и один справа для x-scrolling rad ios. У меня в основном он работает в каркасе, однако нижняя полоса прокрутки всегда находится внизу радио, не всегда видна. Я знаю, что не могу сделать полосу прокрутки липкой, поэтому я немного застрял, как это реализовать.

Вот мой код (это грубо, но это всего лишь PO C)

Мне также интересно, лучше ли использовать этот подход. В идеале я строю строку как настоящую, без разделенных панелей, но я все равно застреваю на правой полосе прокрутки по оси X. Идеальным решением было бы без JS, но не обязательно блокировщика.

Несколько других подходов, которые я пробовал:

  • Сделайте левую панель липкой, но по оси Y правило прокрутки не соблюдается.
  • Установите высоту правой панели как высоту контейнеров, но тогда она не будет прокручиваться влево.
  • Сделайте обе панели прокручиваемыми и используйте JS, чтобы прокрутите оба, но это кажется тяжелым с крайними случаями (прокрутка неправильной стороны)

Изображение реализации enter image description here

Я бился головой это изрядно, и пришло время попросить о помощи. Был бы очень признателен, если бы кто-нибудь мог указать мне правильное направление или исправить мой подход!

...