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

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


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


При написании сообщения, в том месте где такой эффект нужно применить, переходим из обычного режима в режим 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


15 комментариев:

  1. Да, действительно оригинальный код прокрутки текста.

    ОтветитьУдалить
    Ответы
    1. Спасибо, Рамазан. Удивительно, но сегодня вижу твоё фото.

      Удалить
  2. Спасибо! Очень даже нужно.

    ОтветитьУдалить
  3. Татьяна, рада, что Вы уже нашли этому применение.

    ОтветитьУдалить
  4. хороший код, спасибо.

    ОтветитьУдалить
    Ответы
    1. Возможно, когда-нибудь Вам и пригодится.

      Удалить
  5. Вика привет, хорошее решение, без полосы прокрутки оригинально. Можно еще стиль CSS вставить в шаблон, а текст или код, когда нужно, на странице по вкладке HTML заключить в дивы.

    ОтветитьУдалить
    Ответы
    1. Ольга, привет. Можно и в шаблон, конечно. Если этим часто пользоваться. Кстати, длиннющие коды можно таким образом публиковать. Видишь ли, у меня читатели, в основном не любят в шаблоне копаться. Так что я предложила более простой вариант.

      Удалить
  6. Спасибо, Вика за ваш код. Уже давненько хотела что-нибудь подобное на сайте сделать. А так пробую у себя все новое. Очень интересно этим заниматься

    ОтветитьУдалить
  7. Спасибо, Вика за ваш код. Уже давненько хотела что-нибудь подобное на сайте сделать. А так пробую у себя все новое. Очень интересно этим заниматься

    ОтветитьУдалить
    Ответы
    1. Светлана, конечно попробуйте. Я сама всёновенькое люблю тестировать.

      Удалить
  8. Подойдет для вставки исходного кода на страницу?

    ОтветитьУдалить
    Ответы
    1. Нет не получится. Вот так можно сделать http://www.shpargalochki.ru/2015/10/kak-oformit-krasivo-kod-na-stranice.html

      Удалить
  9. Виктория, Доброе утро! Я сделала на БЛОГЕ КОТА ВАСЬКИ оригинальную прокрутку текста. ЗДОРОВО! Намного интереснее, чем писать "Читать дальше". СПАСИБО!

    ОтветитьУдалить
    Ответы
    1. Ирина, тут конечно дело Ваше. Кнопка читать дальше полезна тем, что на главной странице отображалось часть текста. а остальной на другой странице. Это скорее для того, чтобы не перезагружать эту главную. А всё то что спрятано в полосу прокрутки робот видит полностью. И если много на главной сообщений то такой вариант не лучшее решение.

      Удалить

Пользовательский поиск