Оригинальная прокрутка текста.

Всем, доброго времени суток. Бывают моменты, когда слишком длинный текст нужно оформить, используя полосу прокрутки. Вертикальную или горизонтальную - кому как нравится. Один из вариантов был описан в этом сообщении. Предлагаю сегодня код, как сделать оригинальную прокрутку длинного текста без этой полоски.
Пользователь просто будет прокручивать колёсиком мыши по выделенному участку в сообщении. Посмотрите пример ниже.

Кто на лавочке сидел, Кто на улицу глядел, Толя пел, Борис молчал, Николай ногой качал. Дело было вечером, Делать было нечего. Галка села на заборе, Кот забрался на чердак. Тут сказал ребятам Боря Просто так: - А у меня в кармане гвоздь! А у вас? - А у нас сегодня гость! А у вас? - А у нас сегодня кошка Родила вчера котят. Котята выросли немножко, А есть из блюдца не хотят! - А у нас в квартире газ! А у вас? - А у нас водопровод! Вот! - А из нашего окна Площадь Красная видна! А из вашего окошка Только улица немножко. - Мы гуляли по Неглинной, Заходили на бульвар, Нам купили синий-синий Презеленый красный шар! - А у нас огонь погас - Это раз! Грузовик привез дрова - Это два! А в-четвертых - наша мама Отправляется в полет, Потому что наша мама Называется - пилот! С лесенки ответил Вова: - Мама - летчик? Что ж такого? Вот у Коли, например, Мама - милиционер! А у Толи и у Веры Обе мамы - инженеры! А у Левы мама - повар! Мама-летчик? Что ж такого! - Всех важней,- сказала Ната,- Мама - вагоновожатый, Потому что до Зацепы Водит мама два прицепа. И спросила Нина тихо: - Разве плохо быть портнихой? Кто трусы ребятам шьет? Ну, конечно, не пилот! Летчик водит самолеты - Это очень хорошо! Повар делает компоты - Это тоже хорошо. Доктор лечит нас от кори, Есть учительница в школе. Мамы разные нужны, Мамы разные важны. Дело было вечером, Спорить было нечего.

При написании сообщения, в том месте где такой эффект нужно применить, переходим из обычного режима в режим HTML. И воспользуемся следующим кодом.

<div class="scrollbar">
<div class="inner">здесь весь наш длиннющий текст.
</div>
</div>
<style>.scrollbar {
  background-color:#D1C2C2 ; / цвет фона /
  border:4px solid:# 3399CC ; /ширина и цвет рамки/
  color:white; /цвет текста /
  overflow:hidden;
  text-align:justify;
}

.scrollbar .inner {
  height:100px;   /высота блока текста/
  overflow:auto;
  margin:15px -300px 15px 15px;
  padding-right:300px;
}</style>

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

И сегодня у меня всё. Спасибо, что читаете мои шпаргалки , До новых встреч. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email