Проблема:
Я столкнулся с любопытным поведением Google Chrome по умолчанию при создании простого макета SPA с HTML и CSS-сеткой.
Когда дело дошло до анимации отдельных строк сетки, для которой я либо динамически генерировал контент (и элементы), либо изменял высоту существующих элементов на :hover над другим элементом в той же сетке, высота содержащей строки расти:
- вверх - если
element:hover было в нижней половине экрана (динамический контент торчит из области просмотра с верхом);
- вниз - если
element:hover было в верхней половине экрана (динамический контент либо полностью виден, либо торчит из области просмотра вниз);.
!important Вышеприведенное работает только в том случае, если находящийся над ним element вынут из исходного места в документе и помещен ниже динамического элемента с помощью свойства grid-area. В любом другом случае сетка-ряд всегда расширяется вниз.
Обновление отредактировано 02.05.2017
Как указал Michael_B в разделе комментариев, любопытное поведение браузера связано с функцией Google Chrome, называемой прокруткой.
Michael_B: В Chrome направление раскрывающихся прямоугольников вверх / вниз определяется положением прокрутки в области просмотра, а не самим макетом.
По сути, они привязывают элемент DOM к текущей позиции прокрутки. Движение этого конкретного («якорного») элемента на экране будет определять корректировку, если таковая имеется, позиции прокрутки.
Вы можете прочитать все об этом здесь !
Переопределенная проблема:
Поскольку нет способа изменить привязку прокрутки, кроме как отключить ее с помощью overflow-anchor: none, это не поможет реализовать желаемое поведение, подробно описанное в разделе «Ожидаемый результат».
Ожидаемый результат:
Я бы хотел, чтобы любые элементы, содержащиеся в ряду сетки, анимировались вертикально вверх независимо от положения экрана элемента, наведенного на него. Другими словами, я хочу, чтобы анимированная по высоте строка сетки увеличивалась во всех случаях снизу вверх до верха страницы, а не сверху вниз, но при условии сохранения структуры и потока документов.
Выполнено исследование:
Я немного покопался, и кажется, что существует множество решений для довольно схожих проблем, но в отношении block отображаются элементов и нет для CSS-Grid .
Решения e. г.,
Вот некоторые из stackoverflow:
А также снаружи:
Краткое содержание исследования:
Все вышеперечисленные и многие другие доступные в сети решения вращаются главным образом вокруг установки правила CSS position:relative для родительского контейнера для анимируемого элемента блока, а затем объявления position:absolute и bottom:0.
на анимированном элементе блока.
И в этом случае, поскольку блочный элемент теперь расположен абсолютно снизу его контейнера, он вынужден анимироваться в желаемом направлении, поскольку ему некуда расширяться, кроме как вертикально увеличиваться вверх.
Почему это не работает для CSS Grid?
В случае стандартного потока документов position:absolute элемент позиционируется относительно своего первого позиционированного (не статического, например, position:relative) предка, вынимая его из обычного потока документов. Это также относится и к Grid, но, в частности, это то, что обычный элемент в сетке по умолчанию растягивается как по горизонтали, так и по вертикали, чтобы соответствовать всей объявленной области сетки. Наоборот, позиционируемый элемент сжимается, чтобы соответствовать и приспосабливает его размер к содержимому или, что еще хуже, не занимает никакого вертикального пространства вообще. Чем вы можете установить grid-auto-rows: minmax() свойство, чтобы попытаться покрыть это. Но опять же, чем это идет к его поведению по умолчанию. Это также не решает проблему, поскольку наличие других элементов в сетке будет переполнено позиционированным.
Конечно, вы можете попытаться поместить элемент блока в строку сетки, и position: it absolute в position: ed relative ly строку-строку и установить bottom:0 для элемента блока, который, кажется, сначала хорошо работает. Но потом вы заметите, что блочный элемент будет расти над предыдущими элементами документа. Это на самом деле продемонстрировало бы такое же поведение, если бы вся структура макета была построена на блочных элементах, поэтому мне не понравилась идея с самого начала. Это также причина, по которой я изложил очевидное в первом предложении этого раздела.
Предлагаемое решение
Я считаю, что я понял, как решить эту проблему концептуально, но мне не нужны технические навыки для этого. То, что мне кажется правильным, это попытаться переопределить исходное поведение браузера, когда element:hover находится в верхней части экрана, и заставить его работать, как это было бы в другой половине, так как желаемый результат уже встроен в браузер, но срабатывает при нежелательных обстоятельствах. Я, конечно, открыт для других предложений.
Обновление отредактировано 02.05.2017
Решение недействительно из-за технических ограничений.
#container {
display: grid;
grid-auto-rows: minmax(300px, auto) 100vh;
align-content: center;
color: white;
font-size: 24px;
}
#fisrtelement {
display: grid;
background-color: orange;
}
#secondelement {
background-color: greenyellow;
}
.expandable {
height: 100px;
background-color: forestgreen;
}
.content:hover~.expandable {
height: 150px;
}
.content {
min-height: 120px;
}
#item1 {
grid-area: 1/1;
background-color: forestgreen;
}
#item2 {
grid-area: 2/2;
}
#item3 {
grid-area: 3/3;
background-color: forestgreen;
}
<div id="container">
<div id="fisrtelement">
<div id="item1" class="content">Content</div>
<div id="item3" class="content">Content</div>
<div id="item2" class="expandable">Expandable area (on content:hover)</div>
</div>
<div id="secondelement">
</div>
</div>