Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Блок ссылок с полосой прокрутки (https://javascript.ru/forum/xhtml-html-css/59658-blok-ssylok-s-polosojj-prokrutki.html)

sergofedor06 21.11.2015 10:45

Блок ссылок с полосой прокрутки
 
Привет!
Может кто подскажет как сделать вот такую верстку на 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>



Скриншот блока ссылок

рони 21.11.2015 10:56

sergofedor06,
http://manos.malihu.gr/jquery-custom-content-scroller/

ruslan_mart 21.11.2015 13:32

рони, jQuery? Это можно посредством CSS сделать.

ruslan_mart 21.11.2015 13:41

http://jsfiddle.net/ahw2tnk6/

EmperioAf 21.11.2015 14:16

Цитата:

Сообщение от Ruslan_xDD
Это можно посредством CSS сделать

врядли топикстартер не знает о свойстве
overflow: auto

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


Вот здесь набор плагинов jQuery - выбирайте какой нравится:
https://plugins.jquery.com/tag/scrollbar/

рони 21.11.2015 14:40

Цитата:

Сообщение от Ruslan_xDD
Это можно посредством CSS сделать.

врятли ... посмотри примеры ...
http://manos.malihu.gr/repository/cu..._examples.html
по твоей ссылке никакой стилизации и кросбраузерности не увидел ...

sergofedor06 21.11.2015 21:07

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



ruslan_mart 21.11.2015 23:46

sergofedor06, пока никак, это только в опере и хроме работает.

Barbos 21.11.2015 23:54

Интерсно, а в флеше можно это изобразить?

sergofedor06 22.11.2015 00:14

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


Часовой пояс GMT +3, время: 15:42.