Сначала в моемBlog

Я не знаю, когда то, что мы когда-то думали, будет сломано, если мы не будем настаивать на обучении, то в конечном итоге мы будем устранены обществом. Поэтому я решил написать серию "Оборудование и ретроспектива", чтобы зафиксировать знания и ключевые моменты, за которыми я не мог уследить. Содержание не обязательно сложное, и содержание не обязательно высокое. Может быть, кто-то уже написал то же самое. учебник, но я надеюсь, что вы сможете извлечь из моих заметок то, что считаете важным, оставить настоящий гиковский мир в сложной работе и надеяться, что когда-нибудь эти вещи можно будет применить в работе. -XGHeaven

Не забудьте сначала просмотреть оглавление, найти интересующий вас контент и прочитать его, ведь я здесь не для того, чтобы писать учебник.

позиция: липкая Что это за чертовщина?

В последнее время компания инкапсулирует компонент формы с помощью Regular, и ей необходимо реализовать функцию фиксации заголовка таблицы. Это эффект, которого достигают почти все библиотеки компонентов, поэтому существует множество способов его достижения:

1. Поскольку атрибут Position для THEAD/TR недействителен, вам необходимо создать заголовок с DIV. Затем установите этот заголовокposition: absolute,в то же времяtop: 0. В то же время в этом режиме пользователю необходимо указать ширину каждого столбца, чтобы самодельные заголовки соответствовали один в один с нативной таблицей ниже. Если не указано иное, вы также можете дождаться завершения рендеринга dom перед измерением ширины. Например, Ant Design использует этот метод.
2. Поскольку сложность вышеуказанной схемы заключается в том, что консистенция ширины самопроданного заголовка и родной таблицы не может быть хорошо гарантирована, поэтому босс нашей группы предложил использовать собственную Thead, контролировать событие прокрутки и установить событие прокрутки и установить событие прокрутки и установитьtransformАтрибут делает компенсацию заголовка, тем самым реализуя проблему FixHeader, которая решает первую проблему, но вам необходимо вручную отслеживать событие прокрутки, где быстрее прокручивается, может быть определенная проблема производительности. И не достаточно элегантно. Если есть контент заднего столаposition: relativeЭлемент перезапишет заголовок.

position: stickyАтрибуты.

Pay Attention«Давайте поговорим о фиксированном столбце табличного компонента».

Когда впервые увидели это знакомое, когда первое предложение «I CA», какое свойство Hell TMD, позиция и когда имеет это свойство. Тогда я пошел посмотретьMDNПрезентация может быть понята как, это свойствоСамый простой способ добиться фиксированного верха.

Он на самом делеposition:relativeа такжеposition: fixedкомбинация, должны сотрудничатьtop/right/bottom/leftОн работает только вместе со свойствами и устанавливает минимальное значение соответствующего направления. Когда больше, чем минимальное значение, он какrelativeчастью документооборота иtop/right/bottom/leftСвойства также терпят неудачу. В противном случае, когда меньше установленного значения, ведет себя какfixed, но этоfixedВоспроизведено не для окна, а относительно ближайшего прокручиваемого элемента блочного уровня.

Если вы читали другие статьи о липкости, большинство из них объяснит ему значение прилипания, то, очевидно, это означает то же самое.Если вы думаете, что сможете понять это после прочтения других руководств, то можете пропустить эту. , если вы этого не понимаете, вы можете прийти ко мне и посмотреть.

Без лишних слов, давайте посмотрим, как правильно использовать sticky.

правильная осанка

Пожалуйста, используйте последнюю версию Chrome для просмотра следующего предварительного просмотра кода или поддержкиposition: stickyбраузер для просмотра. Некоторые веб-сайты не поддерживают Iframe, вы можете пойти в мой блог для просмотра

1. position: stickyТолько в отношении первых скользящих элементов родительского блока (механизм прокрутки, путем установки переполненияoverflow/scroll/auto/overlayэлемент) вместо элемента родительского блока.

   See the Pen позиция липкая относительно самого внешнего прокручиваемого родителя by Bradley Xu (@xgheaven) on CodePen.

2. position: stickyТолько когда соответствующий направление (верхне / правый / правый / дн / левый) установлен, он будет работать, и он может быть наложенным друг на друга, и четыре направления могут быть установлены одновременно.

3. Даже установитьposition: sticky, и может отображаться только в области содержимого элемента родительского блока, она не может выходить за пределы этой области, если только вы не установите отрицательное значение.

4. position: stickyЭто не запускает BFC.Короче говоря, плавающие элементы не рассчитываются при вычислении высоты.

5. когда установленоposition: stickyПосле этого внутреннее позиционирование будет относительно этого элемента

   See the Pen position sticky внутреннее абсолютное позиционирование относительно этого элемента by Bradley Xu (@xgheaven) on CodePen.

6. несмотря на то чтоposition: stickyвести себя какrelativeилиfixed, так что тоже можно пройтиz-indexУстановите их иерархию. Когда следующие одноуровневые узлы этого элемента будут покрывать этот элемент, вы можете пройтиz-indexУровни регулировки.

   See the Pen position: sticky настроить уровень по z-index by Bradley Xu (@xgheaven) on CodePen.

Когда вы понимаете это, на самом деле этот атрибут используется очень просто.

Дай каштан - глава списка адресной книги

нет кода нет bb, переходим сразу к коду.

See the Pen позиционирование липкой адресной книги Демо by Bradley Xu (@xgheaven) on CodePen.

расширить мышление

Как определить, что он был закреплен?

Наиболее распространенное требование состоит в том, чтобы отображать его в обычном режиме, когда он все еще находится в потоке документа, но добавлять тени или изменять высоту, когда он зафиксирован. Для достижения этого эффекта первой реакцией может быть ручной мониторингscrollСобытия, судя по расположению, это, конечно, нет проблем, а потерю реальной производительности, которая приходит с ним.

Лучше всего использовать IntersectionObserver, API, который может отслеживать, отображается ли элемент в области просмотра.«Руководство по использованию API IntersectionObserver». Основной принцип состоит в том, чтобы добавить двух часовых в начало и конец свитка, а затем определить, зафиксирован ли элемент, оценивая появление и исчезновение двух часовых.

примерпосмотреть здесь

Можно ли исправить заголовок/столбец таблицы?

Позже, после того, как мне напомнили пользователи сети, я снова изучил его и обнаружил, что все еще есть способ исправить заголовки и столбцы.

Прежде всего, для Firefox он поддерживает свойство position самого thead/tbody, поэтому этого можно добиться, установив позицию непосредственно в thead/tbody. Для браузера Chrome этого можно добиться, установив th в thead. Подробности смотрите в Демо.

See the Pen position sticky реализует фиксированный заголовок, устанавливая td by Bradley Xu (@xgheaven) on CodePen.

Потом вроде прошлоСпасибо, смотрите воду из "позднего" сериала