Резиновая раскладка
После статьи с примером раскладки очень многие спрашивали, как сделать ее тянущейся. Надо сказать, я изначально не планировал с ней делать что-то подобное. Во-первых, Учебник, все же, не коллекция кода для копирования, а описание сути вещей. Во-вторых же, несмотря на удивительную популярность колоночных раскладок, CSS на них просто не расчитан.
Тем не менее, я подумал, что такой пример все же будет полезен, потому что наглядно показывает, на какие ухищрения надо идти при использовании неподходящих инструментов. То есть это будет скорее отрицательный пример. Больше того, в этой статье будет пример сразу двух вариантов: один другого кривее :-).
Общий принцип
Сам по себе предыдущий макет, в общем-то, уже сверстан достаточно гибко. Ширины всех колонок заданы в процентах, а единственное, что его держит в рамках — это явно проставленная в пикселах ширина <body>. Если ее убрать, то раскладка должна нормально тянуться.
Но наступлению счастья, к сожалению, мешает фоновая картинка, которая визуально представляет колонки. Она, конечно, тянуться не будет и весь колоночный вид собьет. Поэтому с фоном надо что-то придумать.
Решение усложняется тем, что колонок в макете — три. В случае двух колонок фон достаточно было бы сделать пошире и повесить на странице в нужном месте, как я описывал в комментарии к статье про float’ы. С тремя же колонками картинку эту надо как-то разорвать на две, потому что тянуться она не может.
Итак, приступим…
Растягивание
Начниаем с того, что убираем у <body> его ширину в 700px. А чтобы оно не занимало всю ширину окна, закрывая мой любимый фоновый узор, надо дать margin’ы справа и слева:
body {
padding:0;
margin:0 50px;
min-height:100%;
position:relative;
}
Значения padding, min-height и position — это не что-то новое, они остались из предыдущей раскладки.
Есть одна проблема, тем не менее.
* html #main {
margin-left:10%;
margin-right:-1px;
}
Теперь все должно двигаться нормально, и можно перейти к фону.
Вариант 1: картинки в колонках
Первый способ разделить картинку — это снять цельную у <body>, разделить на две части, которые находятся непосредственно под колонками, и назначить их самим колонкам:
body {
background:white;
color:black;
}
#sections {
background:url(left-col-bg.png) #A6BDFF right top repeat-y;
}
#news {
background:url(right-col-bg.
png) white left top repeat-y;
color:#293499;
}
Про картинки тут стоит сказать отдельно. Обе они не бесконечной ширины, вот левая:
… и правая:
Они прижаты к внутренним краям колонок, и когда те становятся шире фона, надо проследить, чтобы цвет, который будет проглядывать из под картинки сливался с ней красиво. Это оттенок голубого с правого края картинки для левой колонки и белый — для правой. Задаются они, как видно, в тех же правилах, что и сам фон.
Дальше нужно сделать так, чтобы фон продолжался дальше, а не обрывался сразу после текста колонок. Для этого подойдет способ с очень длинными padding’ами, который я описывал в статье про float’ы. Добавим это к правилам раскладки колонок:
#sections {
float:left; width:20%; margin-left:-75%;
padding-bottom:32767px; margin-bottom:-32767px;
}
#news {
float:right; width:25%;
padding-bottom:32767px; margin-bottom:-32767px;
}
И вот как это выглядит.
Теперь колонки заканчиваются на одной высоте, но продолжаются не до конца, а обрываются по самой высокой из них.
Это происходит потому, что их обрезает там блок #content, который имеет автоматическую высоту и overflow:hidden. Отказаться от этого нельзя, потому что иначе все длинные хвосты колонок будут отображаться и страница приобретет довольно длинный скроллер :-).
Ему также нельзя поставить min-height:100%, потому что у его контейнера (<body>) четкая высота не задана, а, напомню, 100% от незаданного браузер посчитать не может. Да и все равно это бы выглядело плохо, потому что будь
В этом состоит минус первого варианта: придется отказаться от эффекта «страница не короче окна». Для этого все правила для позиционирования подвала нужно удалить:
body {
padding:0;
margin:0 50px;
min-height:100%;
position:relative;
}
* html body {
height:100%;
}
#meta {
position:absolute; bottom:0;
height:40px; width:100%;
padding:1px 0;
}
#content {
padding-bottom:42px;
}Получится так.
Еще один маленький штрих. Если посмотреть на плашки меню слева и на заголовок «Новости» справа, то видно, что они залезают на пунктирные линии, чего не было в изначальном фиксированном варианте. Теперь это происходит от того, что фоновые картинки лежат в блоках колонок, и все их содержимое, конечно же, лежит сверху фона. Самое естественное решение отодвигания содержимого от края — это padding. Но если его добавить, то увеличится и размер блока, колонки станут шире и не уместятся в раскладку. Поэтому, чтобы это компенсировать, надо добавить к padding’у отрицательный margin такого же размера:
#sections {
float:left; width:20%; margin-left:-75%;
padding-bottom:32767px; margin-bottom:-32767px;
padding-right:1px; margin-right:-1px;
}
#news {
float:right; width:25%;
padding-bottom:32767px; margin-bottom:-32767px;
padding-left:1px; margin-left:-1px;
}
Вот теперь этот вариант готов.
Вариант 2: плавающие фоны
Итак, размещение фона в колонках с очень длинными хвостами заставляет их жестко обрезать, и убивает идею о минимальной высоте раскладки.
Таким контейнером в фиксированной раскладке работал <body>, но сейчас этого не хватит, потому что в один блок в текущей версии CSS можно положить только один фон. А нам их нужно два, которые будут разъезжаться в разные стороны. Поэтому придется добавить еще один блок, чтобы держать вторую часть фона.
Здесь я хочу сделать паузу и для важного замечания. К сожалению, большинство верстальщиков, которые начинают изучать CSS’ную верстку, воспринимают ее как просто другой синтаксис верстки «вместо таблиц», полностью игнорируя сам смысл подхода с разделением структуры содержимого и оформления, о котором я писал в первой статье про «компот и мух». Поэтому идея добавить в HTML пару лишних <div>ов не вызывает даже секундного раздумья.
Нет в CSS-верстке хаков хуже тех, которые изменяют структуру HTML-документа для чисто оформительских целей.
Это, однако, не означает, что ими никогда нельзя пользоваться. Это не догма, а вопрос оценки требований и возможностей. Больше того, несовершенство современного CSS, к сожалению, временами просто вынуждает к таким мерам. Но надо всегда стараться уменьшить их количество.
Ну да ладно. Представим, что у вас дома семья из пяти голодных ребятишек, а заказчик обещает заплатить 3 миллиона долларов за трехколоночный макет с прижатым к низу подвалом. Займемся.
Для начала уберем все предыдущие правила для предыдущего варианта с фоном в колонках и уберем фон у <body>. Получится такая отправная точка.
Теперь дополнительный контейнер. Обычно его вкладывают внутрь существующего на манер матрешки:
<body>
<div>
<остальной контент>
</div>
</body>
Но нам этот способ не подойдет. Наша цель, чтобы он имел ту же высоту, что и <body>, но, как я уже упоминал раньше, для <body> у нас высота не задана, а значит никакие height:100% и min-height:100% работать не будут, внутренний контейнер не будет дотягиваться до низа.
Написать <body> четкую высоту тоже, очевидно, нельзя, потому что тогда оно перестанет тянуться вниз, когда текста много. Что делать?
Наверное есть какие-то нерадикальные способы, но я не нашел другого, кроме такого вот… хм… извращения (по-другому и не назвать):
<body>назначаетсяposition:absoluteиmin-height:100%. Оно в этом случае визуально никак не изменится, останется висеть на том же месте.- Дополнительный контейнер, делается просто пустым блоком в начале
<body>, не заключающим в себя остальное содержимое. Он тоже позиционируется абсолютно, ему назначаются высота и ширина в 100%. А дальше он перемещается под<body>с помощью отрицательного z-index’а.
Таким образом достигается то, что и <body>, и дополнительный контейнер полностью совпадают геометрически. В коде это выглядит так.
HTML:
<body> <div></div> .
..
CSS:
body {
padding:0;
margin:0 50px;
min-height:100%;
position:absolute; z-index:0;
}
#body2 {
position:absolute;
height:100%; width:100%; z-index:-1;
}
Внимательные читатели, у которых к этому месту еще не болит голова, заметят одну странность. Я говорил, что невозможно расположенному внутри <body> контейнеру сделать высоту 100%, потому что у
Почему? Я не знаю :-). Судя по всему, абсолютно позиционированные блоки ведут в этом отношении себя чуть менее привередливо, чем статические. Я попробую порыться в спецификации CSS, но не уверен, что что-нибудь найду. Возможно, это просто синхронный баг Firefox’а и IE, в других браузерах я не смотрел.
Теперь дело за малым: повесить плавающие фоны, имитирующие каждую из колонок. Плавающий фон представляет собой очень длинную горизонтальную картинку, такую, чтобы она была шире любых разумных разрешений экрана.
Пусть будет 4000 пикселов. Дальше эта картинка делится по ширине в том же отношении, что и ширина колонки: например левая колонка имеет ширину 20%, значит картинка для нее разделится на части 800 пикселов слева и 3200 — справа. Для правой колонки — аналогично.
И дальше их крайние части зарисовываются фоном колонок, а оставшееся оставляется прозрачным (обозначено серым фоном):
Картинки, кстати, в формате png, хотя считается, что прозрачность в этом формате не поддерживает IE. На самом деле, он не поддерживает только переменную прозрачность. Если же картинки перевести в индексированную палитру из 256 цветов, то все работает.
Теперь прикрепим их в нужные точки:
body {
background:url(left-body-bg.png) 20% 0 repeat-y;
color:black;
}
#body2 {
background:url(right-body-bg.png) 75% 0 repeat-y;
}
… и получим практически то, что надо.
«Секрет» правильного расположения фонов заключается в том, что цифра позиции фона (20% и 75%) означает точку и в ширине контейнера, и в ширине самой картинки.
Именно поэтому «0» означает помещение левой стороны картинки к левому краю, «50%» — середины картинки в середину, а «100%» — правой стороны к правому краю. И при сжимании и разжимании окна картинка всегда будет «ездить», прицепившись своими 20% или 75% к тем же позициям.
Остался фон внутри средней колонки, который я специально оставил отдельно. Сейчас два фона лежат один под другим: <body> выше, #body2 ниже. И чтобы достигнуть нужного эффекта, по идее, достаточно было бы закрасить белым то пространство, которое у нижней картинки прозрачное. Если бы не Internet Explorer :-).
Я затрудняюсь это объяснить понятным способом, но получается так, что z-index:-1, назначенный дополнительному контейнеру #body2, действительно уводит его под <body>, но не до конца, а только под содержимое. Фон же <body> остается все равно в самом низу. Таким образом, если картинку «как-бы-нижнего» блока зарисовать белым, то в IE она перекроет картинку левой колонки.
Исправляется это очередным хаком (последним на сегодня). Мы зарисуем просто белым цветом фон <body> для IE, и фон нижнего контейнера — для остальных:
html>body #body2 {
background-color:white;
}
* html body {
background-color:white;
}
Хак html>body обладает эффектом, обратным * html. Так сложилось, что IE игнорирует этот селектор, а остальные нормально его применяют.
Готово.
Поверьте, если к этому моменту вы потеряли нить изложения, это совершенно нормально. Так всегда бывает, когда вместо логичной теории, приходится возиться с нелогичными реализациями.
Резюме
Помимо того, что я уже много раз сказал о том, что имитация колонок CSS’ом — неблагодарное занятие, я хочу сделать еще одно важное замечание.
Не существует никакого Универсального Способа Трехколоночной Раскладки. Те решения, которые я описал выше, оказались бы непригодными, для, скажем, другого фона или для непроцентного поведения колонок или подвала с нефиксированной высотой.
Там не возникло бы описанных трудностей, но возникли бы совершенно другие. Поэтому я все время ставлю ссылки на предыдущие статьи «Учебника» и призываю читать их и понимать (и спрашивать).
Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.
«Резиновая вёрстка»: используем отрицательные поля — Вёрстка
Creating Liquid Layouts with Negative Margins
автор: 2004.06.15 © Райан Брилл (Ryan Brill) и A List Apart
перевод: 2004.07.24 Максим Россомахин
Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с «шапкой» и «подвалом», причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins).
Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки.
Постановка задачи
Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с «шапкой» и «подвалом». Область основного содержимого (контента) будет слева, вторая колонка — справа. Сделать это, в общем-то, довольно просто, но мы пойдем немного другим путем, потому что по условиям задачи код страницы у нас будет иметь определенную структуру.
Зная, как работают «плавающие» блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Однако, раз уж нам так важно, чтобы в текстовых браузерах, программах для чтения с экрана и старых браузерах, не понимающих наши таблицы стилей, сначала был виден контент, а потом уже боковая панель, значит нам надо найти такое решение, которое бы позволило разместить контент в начале кода.
Причем это решение должно ещё и работать в большинстве браузеров.
Исходный код
Давайте-ка взглянем на код двухколоночной страницы с «шапкой» и «подвалом», с которым мы будем работать:
<div>header</div>
<div>
<h2>content</h2>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p>Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
<div>
<h2>sidebar</h2>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
<div>footer</div>
Посмотрите на Примере 1, каким будет содержимое, не обработанное стилевыми правилами. Увидев пример, вы поймете, почему мы хотим расположить контент перед боковой панелью — так отобразят страницу те браузеры, которые не способны правильно понять наши таблицы стилей.
Понятно, что левая область, содержащая контент, должна занять всю свободную ширину страницы минус пространство, необходимое для боковой панели. Хорошо было бы, если бы мы могли задать ширину следующей формулой «100% минус 200 пикселей»? Используя отрицательные границы, мы можем добиться нужного эффекта. Нет, честно!
Необходимые стили
Теперь примемся за CSS. Как мы и сказали, зададим нашему блоку с контентом ширину, равную 100%, включаем «левое обтекание» (float: left;), и устанавливаем отрицательное правое поле, равное «-200px». Включение обтекания (float) здесь очень важно, так как поля (раз уж мы работаем с отрицательными величинами) у плавающих (float) и строчных (inline) элементов обрабатываются броузерами совсем не так, как у «неплавающих» блочных элементов.
Отрицательное правое поле у блока контента нужно скорей для того, чтобы боковой блок «всплыл» в освободившееся место, нежели для изменения вида самого блока контента. Посмотрите, что получилось в результате, на Примере 2.
Мы «сплавляем» боковую панель вправо (float: right;) и задаем ей ширину, равную тем самым оставленным для неё 200 пикселям. Наконец, мы задаём для нашего «подвального» блока свойство «clear: both», дабы он располагался ниже контента и бокового блока, независимо от того, какая из колонок окажется длиннее. Также мы пропишем фоновые цвета для «шапки» и «подвала», чтобы они выделялись на странице.
#header {
background: #d7dabd;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
}
#sidebar {
width: 200px;
float: right;
}
#footer {
background: #d7dabd;
clear: both;
}
Данный CSS даст нам то, что изображено в Примере 2. Как видите, нам нужно теперь отодвинуть контент от правой стороны документа. Поэтому мы решили воспользоваться ещё одним div-блоком — этот метод понимается браузерами намного лучше, чем любой другой способ. Итак, мы внесли следующие изменения в наш XHTML код:
<div>
<div>
<h2>content</h2>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p>Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>
Phasellus varius eleifend.</p>
<p>Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>
Теперь мы зададим блоку контента правое поле и фоновый цвет, расположив его тем самым там, где нам нужно, и отделив его от боковой панели.
#content {
background: #f1f2ea;
margin-right: 200px;
}
Наводим лоск
Прежде чем перейдем к визуальному оформлению страницы, давайте решим ещё одну проблему. Нам нужно задать нулевое верхнее поле первому элементу в нашем блоке контента, равно как и нулевое нижнее поле для последнего элемента. В нашем конкретном случае мы просто зададим для заголовка h2 margin-top: 0, и создадим класс для последнего абзаца в блоке контента, у которого будет нулевое нижнее поле. Мы это сделали — теперь можно и на Пример 3 посмотреть.
Уже значительно лучше, но, конечно, вы обратили внимание на то, что правая панель не заполняет всё пространство, доступное ей по высоте.
Спасибо Дэну Цедерхолму (Dan Cederholm) за небольшой трюк с использованием фоновых изображений, с помощью которого мы легко решим возникшую проблему (статья Дэна «Faux Columns»).
Во-первых, создадим вот такую картинку. Ее ширина 200 пикселей, т.е. такая же как и ширина нашей боковой панели.
Согласно трюку Дэна, добавим обрамляющий блок, охватывающий блоки «container» и «sidebar», а также добавим еще один блок со стилем clear: both прямо под ними. Наш XHTML код будет выглядеть так:
<div>
<div>
<div>
<h2>content</h2>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p>Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>
<div>
<h2>sidebar</h2>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
<div> </div>
</div>
Теперь, сделав это, мы можем добавить к охватывающему блоку фоновое изображение.
Мы зададим фоновому изображению свойство «repeat-y» и прижмём его к правому краю. Чтобы побороть один баг в Internet Explorer, нам также нужно добавить такое же фоновое изображение и к блоку «container».
#wrapper {
background:
#f1f2ea url(background.gif) repeat-y right;
}
#container {
width: 100%;
background:
#f1f2ea url(background.gif) repeat-y right;
float: left;
margin-right: -200px;
}
Не забудем мы и про стили для нашего выключающего блока (с классом «clearing»), для того чтобы «подвал» расположился сразу под обеими колонками, а также для того, чтобы они отображались корректно:
.clearing {
height: 0;
clear: both;
}
Всё это даст нам отлично смотрящийся «резиновый» двухколоночный макет страницы, не теряющий привлекательность даже при отключенных CSS. Взгляните на Пример 4. Добавьте к элементам границы и отступы, и у вас получится отличная отправная точка для своего резинового макета.
Само собой разумеется, что если бы нам потребовалось разместить боковую панель слева, то мы бы просто поменяли значения для float: и margin: на противоположные. Было «float: left» — стало «float: right»; было «margin-right: 200px», стало — «margin-left: 200px», и так далее.
Колдуем дальше: трёхколоночная версия
А что если пойти дальше и попробовать создать трёхколоночный макет с гибкой областью контента посередине? Мы не просто сделаем это — мы сделаем это в два счета! Нам понадобится внести несколько последних мазков в наш XHTML-код, добавив в него ещё несколько блоков — теперь мы готовы дописать ещё чуть-чуть CSS.
<div>
<div>
<div>
<div>
<div>
<h2>navbar</h2>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
<div>
<h2>content</h2>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p>Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>
</div>
<div>
<h2>sidebar</h2>
<p>Here be your sidebar.
Add whatever content you may desire.</p>
</div>
<div> </div>
</div>
</div>
Phasellus varius eleifend.</p>
<p>Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
</div>
</div>
<div>
<h2>sidebar</h2>
<p>Here be your sidebar.
Add whatever content you may desire.</p>
</div>
<div> </div>
</div>
</div>
И снова псевдо-колонки
И вот вновь, с тех пор как нам требовалось сделать высоту всех колонок на странице визуально одинаковой, мы создаём ещё псевдо-колонки. И вот мы сделали две таких картинки:
Как вы можете видеть в вышеприведённом XHTML-коде, мы добавили: общий обрамляющий блок <div>, блок левой колонки <div>, а так же блок <div> вокруг центрального текста страницы.
Наш новый обрамляющий блок будет содержать фоновую картинку для левой колонки, и это фоновое изображение будет повторяться вниз до нижнего «подвального» блока. Ещё мы перенесли фон из блока <div> в блок <div>.
#outer_wrapper {
background: #fff url(background_3.gif) repeat-y left;
}
#wrapper {
background: url(background_2.gif) repeat-y right;
}
Там, где нет фоновой картинки, будет виден белый цвет, окрашивая тем самым фон нашей средней колонки. Добавим также фоновые картинки во внутренние элементы, чтобы избежать досадных глюков в некоторых версиях браузера Internet Explorer.
#container {
width: 100%;
float: left;
margin-right: -200px;
background: url(background_2.gif) repeat-y right;
}
#content {
margin-right: 200px;
background: url(background_3.gif) repeat-y left;
}
Затем добавим вот такие простые стили, снова используя поля для позиционирования левой и средней колонок, так, как нам нужно.
#main {
margin-left: 150px;
}
#left {
width: 150px;
float: left;
}
Наконец, мы добавили следующие стили «шапке» и «подвалу», придав им более законченный вид:
border: 1px solid #cecea5;
Посмотрите на Пример 5 и не стесняйтесь заглянуть в его код.
Конечно, не забудьте в своем сайте использовать директиву @import, чтобы старые броузеры не изуродовали ваш сайт.
В заключение
Как вы видите, отрицательные поля — малоизвестный аспект CSS-вёрстки, который дает еще один импульс для творчества тем из нас, кому так важен порядок расположения элементов в коде страницы, и кто не против добавить для этого несколько дополнительных обрамляющих div-блоков.
Райан Брилл
Ryan Brill has a passion for design, especially when XHTML and CSS are involved. He’s fully devoted to doing his part to push the web in the right direction, not only when writing for his blog, but also when developing sites through his web development company, Infinity Web Design.
* * *
Лечим очередной баг IE (примечания коллектива Webmascon.com)
Наблюдается следующая картина: если боковое меню содержит больше определенного количества пунктов, то фоновое изображение не множится до конца соответствующего блока (смотрите пример). Ошибка наблюдается лишь в Internet Explorer для Windows (проверяли в 6-ой версии), качественно сделанные браузеры ведут себя адекватно.
Баг лечится очень просто (2 варианта решения):
В стили для #outer_wrapper нужно добавить…
border: 1px solid transparent;
…или туда же вписать
height:100%;
Вуаля! — вот она — исправленная страница!
P.S. Отдельное спасибо Андрею Алексееву, сподвигнувшему нас на решение этой проблемы.
P.P.S. Дружно поблагодарим Гостя за второй вариант решения.
Обсудить (комментариев: 39)
« назад к списку статей
overscroll-behavior — CSS: каскадные таблицы стилей
Свойство CSS overscroll-behavior определяет действия браузера при достижении границы области прокрутки.
Это сокращение для overscroll-behavior-x и overscroll-behavior-y .
По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновление страницы при достижении верхней или нижней части страницы (или другой области прокрутки). Вы также могли заметить, что когда у вас есть диалоговое окно с прокручиваемым содержимым поверх страницы с прокручиваемым содержимым, как только граница прокрутки диалогового окна будет достигнута, основная страница начнет прокручиваться — это называется 9.0003 цепочка прокрутки .
В некоторых случаях такое поведение нежелательно. Вы можете использовать overscroll-behavior , чтобы избавиться от нежелательной цепочки прокрутки и поведения браузера, вдохновленного приложением Facebook/Twitter, типа «потяните, чтобы обновить».
Обратите внимание, что это свойство применяется только к контейнерам прокрутки. В частности, поскольку