Образовательный портал «Кафедра онлайн» НИЯУ «МИФИ», Обнинск"

Главная » Рубрики » Блог студентов » Об одной задаче на тему CSS

Об одной задаче на тему CSS

Д.К. Легчиков, студент 3-го курса (группа ВТ1- С10)

Постановка задачи

Задача связана с продвинутой версткой web-страниц. Исходную постановку задачи смотрите здесь: Внешний скролл дивов. Продолжение темы.

Требуется обеспечить прокрутку одного конкретного div-a, при этом div имеет произвольный уровень вложенности и может находиться в любой части страницы. Для прокрутки div-a должен использоваться главный скролл страницы. При прокрутке страницы весь контент остается неподвижен, кроме определенного div-a. Важной особенностью является то, что контент div-a, который прокручивается, может генерироваться динамически (Ajax, iframe и т.п.). Для решения необходимо использовать только средства HTML и CSS, не прибегая к JavaScript.

Возможные решения

  • Использование свойства overflow
В CSS предусмотрена возможность управления скроллингами на странице. Для этого существует свойство overflow. Свойство overflow управляет отображением контента блочного элемента (дива), если контент целиком не помещается в диве и выходит за его пределы.



Проблема состоит в том, что с помощью свойства overflow скролл устанавливается на том конкретном диве, контент которого выходит за пределы данного дива. С помощью свойства overflow нет возможности прокручивать контент произвольного дива главным скроллом web-страницы.
  • Использование свойства position:fixed

Для позиционирования элементов в css предусмотрено свойство position (устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице). В данном случаем position имеет значение fixed. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.

Идея предлагаемого решения заключается в том, чтобы зафиксировать header и footer web-страницы с помощью position:fixed, а остальному контенту дать возможность свободно прокручиваться.

CSS разметка такой страницы:

#header {
background: #eee;
width: 800px;
height: 110px;
position: fixed;
top: 0;
right: 0;
left: 0;
margin: auto;
z-index: 100;
}
#content {
background: #ffe;
width: 800px;
margin: 110px auto;
padding-bottom: 100px;
z-index: 5;
}
#footer {
background: #eee;
width: 800px;
height: 90px;
position: fixed;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: 100;
}

С помощью свойства z-index можно сортировать слои в Z плоскости (в глубину). Это позволяет на передний экран вывести хедер и футер и создать эффект прокрутки контента под ними.
  • Псевдоклассы CSS3

Так же можно попробовать выделить нужный слой с помощью новых средств CSS3 — псевдоклассов. Псевдокласс :nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов (DOM). Если пронумеровать все элементы на странице, то с помощью этого псевдокласса можно задать уникальные свойства только для определенных слоев. Но это крайне ухудшит понимание и дальнейшую доработку кода (особенно другими разработчиками).

Выводы

Ни одно из возможных решений не дало нужного результата в решении данной задачи. Удалось найти лишь частное решение. Общее же решение одними средствами HTML и CSS не удалось получить. Возможно, в будущем добавятся новые возможно CSS, а пока общее решение задачи можно реализовать только с помощью использования JavaScript.

Комментариев нет

Похожие публикации
 
 

Комментариев нет

Вы можете быть первым, кто оставит комментарий.

 
 

Вы можете оставить комментарий

 





 
 

Выполните простое задание (антиспам). Картинки можно сибирать приблизительно, без точной подгонки фрагментов.


 
 
 

Наверх