Показать сообщение отдельно
  #17 (permalink)  
Старый 13.06.2011, 14:03
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

я делал так. но чуть по-другому. называл это скроллом аля Iphone

только у меня было горизонтально.

http://mazktest.ucoz.ru/shabla/


осталось только тут (меню сверху). делал на скорую руку, на JQuery

структура у списка была такой

<!-- для позиционирования ВСЕГО списка -->
<div id="wrapper">

  <!-- стрелка  влево. -->
  <a class="ltr"> <- </a>

       <!-- сам список -->
       <ul>

                 <!-- обертка для LI -->
                 <span>
                              <li>LOREM IPSUM</li>
                 </span>
      </ul>

  <!-- стрелка  вправо. -->
  <a class="rtr"> -> </a>

</div>


для UL в стилях прописал overflow:hidden, потому что у меня он горизонтальный, поэтому прокрутка только по X. Чтобы убрать их переносимость и сохранить выравнивание, поставил white-space: nowrap;. ( если поставить display:inline-block, будут проблемы с вертикальным выравниванием. я давно это делал, не помню, в каком браузере)

у стрелок float:left и они сдвинуты в сторону. чтобы они не перемещались вместе со скроллом, поставлены рядом со списком

у самих LI стоит просто display:inline-block

попробую сделать пример для такого списка, но вертикального




<style>
#wrapper {

     height : 100px;
     width: 200px;
     
}
#wrapper a {

    margin : 10px 0;

}
#wrapper ul {

   border: 1px red dashed;
   height : 100%;
   overflow-y: scroll;

}



</style>


<div id="wrapper">

  
  <a class="ltr">ВВЕРХ</a>

      
       <ul>

                 
                 <span>
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>             
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>                
                 </span>
      </ul>

  
  <a class="rtr"> ВНИЗ </a>

</div>


сижу с FF4.01, отображается нормально.

напишем код.попробую без JQuery.

размещу на юкозе
Ответить с цитированием