Scroll внутри блока без полосы прокрутки

[iDrugov]

Задача: сделать scroll внутри div, избегая полосу прокрутки.

Причина: полоса прокрутки не вписывается в дизайн сайта (ну как обычно).

Выбранный путь:

#block
{
  position: absolute;
  height: 256px;
  width: 256px;
  overflow: hidden;
}

.info
{
  position: relative;
  padding: 0;
  margin: 0;
}

#block:hover .info
{
  position: absolute;
  bottom: 0;
}

<div id="block">
  <p class="info">
Вот дом,<br>
Который построил Джек.<br>
<br><br>
А это пшеница,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.<br>
<br><br>
А это веселая птица-синица,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.<br>
<br><br>
Вот кот,<br>
Который пугает и ловит синицу,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
  </p>
</div>

Проблема: это решение не работает с transition-duration, т.е. прокрутку не получается сделать плавной. И нет никого "опознавательного" знака, что можно прокрутить страницу.

Стрелочку вниз можно сделать несложно:

#block:before
{
  position: absolute;
  right: 0;
  bottom: 0;
  content: '';
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid #000;
}

Конечный имеющийся вариант: посмотреть

Но можно ли сделать прокрутку при наведении на саму стрелочку, а не на весь блок в целом? Скажем, даже если сделать её не псевдоэлементом, а отдельным div'ом?

Edited October 21, 2012 by iDrugov

[npofopr]

сделайте скролл скриптом

там вроде было что то такое.

[iDrugov]

npofopr, интересует чистый css, я принципиально ищу обходы

[npofopr]

тогда не проще ли сделать красивую узкую полоску как у гмайла? чем какую то не громоздкую стрелку?

[iDrugov]

Нашел! Нашел решение с плавной анимацией. Ларчик просто открывался: Оставив relative, сделал просто скрытие вверх половины информации. Без изменения position заработал transition-duration

.info
{
  position: relative;
  padding: 0;
  margin: 0;
  top: 0;
  /* плавное воспроизведение вверх */
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

#block:hover .info
{
  top: -50%;
  /* плавное воспроизведение вниз */
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

npofopr, стрелочку или полоску - без разницы. Поменяю значения, будет полоска. Мне вот интересно, как можно ли завязать scroll только на неё? Кстати, завязать анимацию на псевдоэлементы нельзя, так что сделать "плавающую" полоску не получится, если ты о ней.

Edited October 21, 2012 by iDrugov

[mishka]

http://jsfiddle.net/pvV5r/1/

[iDrugov]

mishka, это же гениально! Всё гениальное просто Надо обюзать этот момент!

[mishka]

Не проверял это на мобилах.

Еа симуляторе айпада не работает ((

Так что наверное лучше воспользоватся джсом, предложенным выше.

[iDrugov]

mishka, расчетное разрешение сайта 1024х600, так что мобильники меня вообще не интересуют Кстати, мне нельзя смотреть свою лс!

Конечный рабочий код

<style>

#block
{
  position: absolute; /*необходимо для своих стрелок*/
  height: 256px;
  width: 256px;
  overflow: hidden;
}

#block:after /*стрелка вверх*/
{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  opacity: 0.75;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 4px solid #000;
}

#block:before /*стрелка вниз*/
{
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  opacity: 0.75;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid #000;
}

.info
{
  height: 100%;
  width: 100%;
  padding: 0 25px 0 0; /*"прячет" системную полосу прокрутки за пределы block*/
  margin: 0; /*убирает отступы у тега <p>, что не требуется в <div>*/
  overflow: auto;
}

</style>

<div id="block">
  <p class="info">
Вот дом,<br>
Который построил Джек.
<br><br>
А это пшеница,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
<br><br>
А это веселая птица-синица,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
<br><br>
Вот кот,<br>
Который пугает и ловит синицу,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
  </p>
</div>

Может быть потом, когда решу переписать сайт на jQery Всем огромное спасибо! Этот вариант вполне меня устраивает.

Edited October 30, 2012 by iDrugov

[iDrugov]

Можно ли сделать элемент, который зависит от перемещения мышки? Например, для создания своего scroll. Поэксперементировал с position, но элемент либо "прыгает" в сторону, либо держится на месте.