Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.11.2015, 10:45
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

Блок ссылок с полосой прокрутки
Привет!
Может кто подскажет как сделать вот такую верстку на CSS
как она должна выглядеть визуально я преложил скрин!

это блок ссылок к примеру из 50 штук
на сайте выводится только 13 к примеру на рисукнке
чтобы увидеть остальные нужно прокрутить полосу прокрутки!
собственно в этом у меня и вопрос к гуру верстки - как на цсс это сделать
важно что бы эти стили отображались во всех браузерах одинаково
может кто поможет, или даст линк на пример в интернете
вот мой код хтмл с блоком ссылок
Спасибо!


<div class="scroll-block">
      <ul>
        <li><a class="tip" href="link">Ссылка -1</a></li>
        <li><a class="tip" href="link">Ссылка -2</a></li>
        <li><a class="tip" href="link">Ссылка -3</a></li>
        <li><a class="tip" href="link">Ссылка -4</a></li>
        <li><a class="tip" href="link">Ссылка -5</a></li>
        <li><a class="tip" href="link">Ссылка -6</a></li>
        <li><a class="tip" href="link" title="19174">Ссылка -7</a></li>
        <li><a class="tip" href="link" title="8525">Ссылка -8</a></li>
        <li><a class="tip" href="link" title="2552">Ссылка -9</a></li>
        <li><a class="tip" href="link" title="21537">Ссылка -10</a></li>
        <li><a class="tip" href="link" title="46259">Ссылка -11</a></li>
        <li><a class="tip" href="link" title="2768">Ссылка -12</a></li>
        <li><a class="tip" href="link" title="3013">Ссылка -13</a></li>
      </ul>
    </div>



Скриншот блока ссылок
Ответить с цитированием
  #2 (permalink)  
Старый 21.11.2015, 10:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

sergofedor06,
http://manos.malihu.gr/jquery-custom-content-scroller/
Ответить с цитированием
  #3 (permalink)  
Старый 21.11.2015, 13:32
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

рони, jQuery? Это можно посредством CSS сделать.
Ответить с цитированием
  #4 (permalink)  
Старый 21.11.2015, 13:41
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

http://jsfiddle.net/ahw2tnk6/
Ответить с цитированием
  #5 (permalink)  
Старый 21.11.2015, 14:16
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от Ruslan_xDD
Это можно посредством CSS сделать
врядли топикстартер не знает о свойстве
overflow: auto

Видимо автор хочет сделать стилизованный скролл; как например на htmlbook элемент с классом
jspVerticalBar


Вот здесь набор плагинов jQuery - выбирайте какой нравится:
https://plugins.jquery.com/tag/scrollbar/
Ответить с цитированием
  #6 (permalink)  
Старый 21.11.2015, 14:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Ruslan_xDD
Это можно посредством CSS сделать.
врятли ... посмотри примеры ...
http://manos.malihu.gr/repository/cu..._examples.html
по твоей ссылке никакой стилизации и кросбраузерности не увидел ...
Ответить с цитированием
  #7 (permalink)  
Старый 21.11.2015, 21:07
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

Спасибо за ваш труд!
Ruslan_xDD скажите как поправить в браузере IE11 ВЕРСИЯ
вот скрин как отображается полоса прокрутки.


Ответить с цитированием
  #8 (permalink)  
Старый 21.11.2015, 23:46
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

sergofedor06, пока никак, это только в опере и хроме работает.
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2015, 23:54
Аватар для Barbos
Новичок на форуме
Отправить личное сообщение для Barbos Посмотреть профиль Найти все сообщения от Barbos
 
Регистрация: 16.11.2015
Сообщений: 7

Интерсно, а в флеше можно это изобразить?
Ответить с цитированием
  #10 (permalink)  
Старый 22.11.2015, 00:14
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

а как же это на других сайтах работает во всех браузерах?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39
three.js баг с полосой прокрутки Bo6JI9 Библиотеки/Тулкиты/Фреймворки 1 29.01.2014 14:27
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
Замудрить с полосой прокрутки exp Общие вопросы Javascript 6 06.06.2011 11:55
Размер страницы вместе с полосой прокрутки vah-smile Элементы интерфейса 2 07.08.2010 23:11