Горизонтальная прокрутка

В реализации горизонтальной прокрутки важно сделать правильную структуру. В данном примере используется тройная вложенность. Основной DIV, содержит дочерний DIV, в который помещаются элементы, также заключенные в DIV.
Элемент - универсальная единица. Элементом может быть одно изображение, либо несколько, либо таблица, либо еще один Div, т.е. в место элемента можно подставить любой объект.

<div>Изображение</div>
<div>Изображение1 Изображение2</div>
<div>Таблица</div>

Структура

<div class="scroll">
  <div class="scroll_child">
    <div>Элемент 1</div>
    <div>Элемент 2</div>
    <div>Элемент 3</div>
    ….
    <div>Элемент N</div>
  </div>
</div>

Рис. DIV с горизонтальной прокруткой.

Основная задача состоит в том, чтобы элементы находящиеся внутри дочернего div’а “<div class="scroll_child">”, не переходили на следующую строку, для этого необходимо указать фиксированную длину дочернего div’а, которая будет равна, сумме длин всех элементов входящих в него, т.е <div>Элемент 1</div>+<div>Элемент 2</div>+..+<div>Элемент N</div>. Для этого напишем скрипт c использованием библиотеки jQuery

jQuery

<script type="text/javascript">
  $(document).ready(function(){
      //Количество элементов div находящихся внутри дочернего Div "<div class="scroll_child">"
      var quqntity=$(".scroll_child div").size();

      //Общая длинна всех элементов
      var widthScroll=0;
      for (i=0;i<quqntity;i++){
        widthScroll+=$(".scroll_child div:eq("+i+")").width();
      }

      //Установка ширины дочернего Div "<div class="scroll_child">"
      $(".scroll_child").width(widthScroll);
  });
</script>

Стили

<style type="text/css">
  .scroll{
    width:600px;
    height:150px;
    overflow-x:scroll;
    overflow-y:hidden;
  }
  .scroll_child{
    width:99999px;
  }
  .scroll_child > div{
    float:left;
    width:180px;
    text-align:center;
  }
</style>

Вертикальная прокрутка

Тут все гораздо проще, достаточно указать фиксированные размеры основного окна div, и установить свойству overflow значение scroll.

<style type="text/css">
  .scroll{
    width:150px;
    height:450px;
    overflow-x:hidden;
    overflow-y:scroll;
  }   
</style>
 
<div class="scroll">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
  ….
  <div>Элемент N</div>
</div>

Добавлено: 23 Февраля 2015 17:24:25 Добавил: Андрей Ковальчук Нравится 0

Добавить