JQuery Jscrollpane Горизонтальная прокрутка со встроенным списком HTML - PullRequest
Новая
       33

JQuery Jscrollpane Горизонтальная прокрутка со встроенным списком HTML

3 голосов
/ 23 февраля 2011

Я хотел бы иметь полосу прокрутки со списком HTML, которая будет прокручиваться только горизонтально. Когда я использую приведенный ниже код, элементы моего списка очищаются друг от друга после полной строки, а область прокрутки прокручивается только вертикально. 

<div class="scrolling-list">
<ul>
<li> List item 1</li>
<li> List item 2</li>
<li> List item 3</li>
<li> List item 4</li>
<li> List item 5</li>
</ul>    
</div>

JS 

<script type="text/javascript">
        $(function()
        {
            $('.scrolling-list').jScrollPane();
        });
</script>

CSS 

.scrolling-list{
height:auto;
max-height:200px;
width: 640px;
}
li{
float:left;
width:200px;}

Ответы [ 2 ]

3 голосов
/ 23 февраля 2011

Вместо использования чисел с плавающей запятой вам нужно использовать встроенное отображение блоков и добавить whitespace:nowrap к вашему CSS.Обратите внимание, что это может быть несовместимо с некоторыми браузерами IE. 

.scrolling-list {
    height:auto;
    max-height:200px;
    width:640px;
    white-space:nowrap;
}
.scrolling-list li {
    display:inline-block;
    width:200px;
}
2 голосов
/ 23 февраля 2011

Если подход inline-block не работает для вас, тогда вы можете использовать javascript, чтобы установить ширину UL равной общей ширине всех его дочерних элементов, например. что-то вроде: 

<script type="text/javascript">
    $(function()
    {
        var list = $('.scrolling-list');
        list.find('ul').each(
            function()
            {
                var w = 0;
                $(this).find('li').each(
                    function()
                    {
                        w += $(this).outerWidth();
                    }
                ).css('width', w + 'px');
            }
        )
        list.jScrollPane();
    });
</script>
...