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

Внешний скролл DIV’ов

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

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

Данная заметка посвящена продолжению темы, связаной с продвинутой версткой web-страниц, которая была начата здесь

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

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

Решение

Первый, наиболее очевидный и удобный для использования, вариант решение состоит в изменении CSS свойств выбранного контейнера и добавлении атрибута стиля overflow. Данный способ уже был затронут в заметке Д.К. Легчикова Об одной задаче на тему CSS.

Рассмотрим его более подробно.

Сперва, для искомого DIV-а, прописываем атрибут overflow со значением auto, который добавляет полосу прокрутки контейнера, если его содержимое, выходит за границы блочного элемента.

Затем растягиваем наш контейнер во всю ширину экрана параметром width: 100%; и регулируем положение контента внутренними отступами padding.  В зависимости от расположения в Z-пространстве («глубина экрана», представляет собой дополнительное измерение, расположенное перпендикулярно к экрану монитора) окружающих элементов может потребоваться добавление параметра z-index. Так для исключения наезда контента на другие элементы, лучше задать отрицательное значение, что разместит содержимое контейнера «позади» всего остального окружения.

Однако после выполнения всех вышеописанных действий выявляется существенный дефект, выражающийся в виде не масштабируемого под размер окна скролла (рис.1).

Рис. 1 Полоса прокрутки выезжает за пределы экрана

Исправить данную ситуацию можно внеся следующие изменения.

Удалим из CSS свойств дива атрибуты overflow и z-index (опционально), а затем создадим новый родительским контейнер для нашего блока со свойствами overflow: auto, абсолютным позиционированием через параметр position: absolute, отрицательным z-index и 100% шириной экрана.

После чего получим нужный результат (рис.2).

Рис. 2 Полоса прокрутки во всю высоту экрана

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

Частным решением для статического содержимого контейнера будет являться дублирование этого самого содержимого.

Вырежем родительский контейнер вместе с выбранным дивом из всех уровней вложенности и вставим в корень тега <body>. Весь остальной код вложим в родительский контейнер с абсолютным позиционированием, наподобие того, как мы сделали до этого с выбранным дивом, а на то место где раньше стоял вырезанный контейнер со свойством overflow, вставим выбранный нами DIV в его первоначальном виде, лишь дополнив его свойства одним атрибутом opacity, отвечающем за уровень прозрачности элемента веб-страницы, со значением 0.  В результате первоначальный контейнер станет прозрачным, но останется на своем, за счет чего буден виден скроллящийся DIV, а остальные элементы окружения не сместятся.

HTML код для разъяснения:

<head>
<style>

#staticWrap {position:absolute;width:100%;z-index:1}
#staticContent {position:relative;width:900px;margin:0 auto}

#ScrollWrap {position:absolute;width:100%;overflow:auto;z-index:-1}
#ScrollContent {
padding: 80px 20px 20px 80px;
position: relative;
width: 780px;}

</style>

</head>
<body>
<div id=»ScrollWrap«>     // родительский контейнер для выбранного контейнера, со скроллом
<div id=»ScrollContent«>…</div>    //выбранный контейнер
</div>

<div id=»staticWrap«>     // контейнер с абсолютным позиционированием 

<div id=»staticContent«>   //весь первоначальный код страницы
<div style=»opacity:0;…»>…</div>
</div>   
</div>
</body>

Для DIV-а с динамически генерированным контентом такое решение к использованию не рекомендуется, поскольку напрямую зависит JS кода, используемого для подгрузки содержимого.

Напоследок рассмотрим пример решения аналогичной задачи с использованием JavaScript, которое можно наблюдать непосредственно на данной web-странице.

За основу был взят плагин JScrollPane.

Основная идея этого решения состоит в использовании и динамическом изменении CSS свойства top, определяющего расстояние от верхнего края родительского элемента до верхнего края дочернего элемента.

Рис. 3 Значение top относительно родителя

Первоначально контейнер, для которого необходимо обеспечить прокрутку, обертывается в DIV с классом jspPane, с нулевым значением top (в дальнейшем это значение будет динамически изменяться). Затем контейнер с классом jspPane дважды оборачивается в блоки с классами jspContainer и scroll-pane, а также создается контейнер jspVerticalBar, который содержит в себе скролл. состоящий из бегунка, и, опционально, стрелок прокрутки. Иллюстрация приведена на рис. 4.

Рис. 4 Иллюстрация расположения и вложенности контейнеров

Контейнер scroll-pane имеет размеры области показа искомого DIVа. При передвижении бегунка из блока  jspVerticalBar или прокрутке скролла мыши происходит обработка события Java-скриптом и значение top контейнера jspPane изменяется в отрицательную сторону, тем самым поднимая контейнер jspPane и скрывая его верхушку за пределами jspContainer.

Рис. 5 Иллюстрация смещения контейнера вверх

Таким образом создается эффект прокрутки искомого DIV-а.

Вывод

Несмотря на удовлетворительный результат приведенного решения и широкий спектр ситуаций для его возможного применения, оно скорее представляет собой «костыль», а не универсальное решение, которое требовалось получить.

Разработке лаконичного общего решения препятствует ограниченность и не полная проработанность применяемых средств, что делает невозможным создание полного аналога работающему на сайте кафедры джава-скрипту. Аналога, который использовал бы лишь средства HTML и CSS.

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

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

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

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

 
 

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

 





 
 

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


 
 
 

Наверх