Мобильная версияЯ работаю над инфраструктурой графического пользовательского интерфейса и пытаюсь реализовать свой виджет ScrollArea. Проблема в том, что когда два элемента ScrollArea вложены, прокрутку начинает внешний, что делает внутренний бесполезным.
Например, предположим, что пользователь создает следующий графический интерфейс:
gui = ScrollArea( фон = 'зеленый', Horizontal_padding = '3em', ширина = '15em', высота = '10em', дочерний = Строка([ Область прокрутки( фон = 'желтый', Horizontal_padding = '3em', дочерний = StripedRedRectangle( высота = '20em' ) ), ПолосатыйКрасныйПрямоугольник( высота = '15em' ) ]) ) В результате получится следующий HTML/CSS:
.scroll-area { переполнение: авто; положение: относительное; } .scroll-область > * { минимальная высота: 100%; минимальная ширина: 100%; } .ряд { дисплей: гибкий; выровнять-элементы: растянуть; } .row > * { гибкий рост: 1; } .striped-red-rectangle { фон: повторяющийся линейный градиент (45 градусов, красный 0%, красный 10%, темно-красный 10%, темно-красный 20%); } #scroll-area-1 { ширина: 15ем; высота: 10ем; фон: зеленый; отступ: 0 3em; размер коробки: граница-коробка; } #scroll-area-2 { фон: желтый; отступ: 0 3em; размер коробки: граница-коробка; } #striped-red-rectangle-1 { высота: 20ем; } #striped-red-rectangle-2 { высота: 15ем;
Как видите, есть только одна полоса прокрутки, рядом с внешней (зеленой) ScrollArea. Желаемый результат — наличие двух полос прокрутки:
[*]Зеленая ScrollArea должна позволять мне прокручивать вниз до тех пор, пока я не дойду до нижней части правого красного прямоугольника, но не дальше. [*]Жёлтая ScrollArea должна позволять мне прокручивать до нижней части левого красного прямоугольника.
Макет желаемого результата:
Как это исправить? Предпочтительно с использованием чистого CSS, но если необходим JS, тоже подойдет.
Примечания:
[*]
Дочерний элемент ScrollArea никогда не должен быть меньше самого ScrollArea. Вот почему у меня есть min-width: 100% и min-height: 100%.
[*]
Желаемую логику макета можно свести к двум правилам:
Виджеты должны быть как можно меньше [*]Однако виджеты всегда увеличиваются, заполняя неиспользуемое пространство.
Например, желтая ScrollArea хочет иметь высоту 0 (как можно меньшую), но поскольку рядом с ней находится прямоугольник размером 15em, она вынуждена иметь высоту 15em, в противном случае доступное пространство будет потрачено впустую.
