Как лучше реализовать вертикальную прокрутку изображений в div?

Question

[Александр]

Хочу реализовать виртуальный монитор на веб-странице, чтобы в нем можно было прокручивать img.
Монитор фиксирован в левом нижнем углу.
HTML:

<section class="screen">
            <div class="screen-area">
                <div class="screenshot"><img src="" alt=""></div>
                <div class="screenshot"><img src="" alt=""></div>
                <div class="screenshot"><img src="" alt=""></div>
           </div>
</section>

Монитор:

.screen{
	width: 1000px;
	height: 600px;
	position: fixed;
	left:0;
	bottom:0;
	background: url(../img/phone.png) no-repeat left bottom;
}

Область экрана:

.screen-area{
	position: absolute;
	left:135px;
	top:77px;
	width: 940px;
	height: 540px;
	overflow:hidden;
}

Изображения находятся под монитором и выводятся через fadeIn/fadeOut.
Всё ли я рационально делаю? Или существует более "элегантный" способ?

Answer 1

[Денис Инешин]

Можно сделать в несколько слоев:
1. Верхний маска с телевизором
2. средний блок с overflow: hidden (так чтобы скрыть бар прокрутки)
3. Нижний - блок с вертикальной прокруткой (overflow-y: scroll) куда всталена пачка картинок.

Можно будет листать колесиком мыши + при желании можно добавить дополнительный функционал, манипулирую свойством scrollTop блока с картинками (чтобы релизовать прокрутку при клике на кнопки, по таймеру и т.п.)

Answer 2

[vdem]

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

Не "под монитором", а скорее с отрицательным z-index?

Comments

[Александр]

Магические числа из-за особенностей скина монитора.
Z-index я не задавал - .screenshot без заданных свойств. Так что img располагаются вертикально один под другим под монитором.

[vdem]

@pchelovek Ну короче, бывает и хуже. Намного. Так что всё нормально :D

Answer 3

[okozlovskyi]

А как ти хочеш их прокручивать, по клику, по таймауту ?

Comments

[Александр]

Одновременно со скроллом страницы

[okozlovskyi]

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