jScrollPane: удалить полосу прокрутки?

Question

Мне бы хотелось, чтобы полоса прокрутки помещалась поверх содержимого, а не заставляла желобок рядом с ним.

На прилагаемом изображении вы можете видеть, что он в данный момент делает с красной полосой прокрутки ... он создаетвертикальный желоб, который толкает содержимое в сторону.

Но я хочу сделать то, что внизу ... расположить полосу прокрутки над содержимым.

Я попробовал абсолютнопозиционирование .jspVerticalBar, но я не смог избавиться от желоба.

РЕДАКТИРОВАТЬ: Вот jsFiddle проблемы: http://jsfiddle.net/8Mebt/3/ -Как видите, в дальнем правом углу все еще есть пробел, и «выбранное» состояние элемента не расширяется полностью, как я хочу.

Answer 1

.jspVerticalBar уже абсолютно позиционирован.Установите для его свойства right то, что вам нужно, а также установите

.jspHorizontalBar, .jspVerticalBar, .jspTrack {
    background: none repeat scroll 0 0 transparent;
}

, чтобы фон желоба ( дорожка, как он называется в jscrollpane ) был прозрачным ..

Демонстрация на http://jsfiddle.net/gaby/DsDQP/

---

Обновление

После комментариев ( включая jsfiddle ) вот мой обходной путь..

Установите для параметра verticalGutter значение 0 и пересчитайте ширину jspPane, включив в нее ширину jspTrack ..

$('.scroll-pane').jScrollPane({verticalGutter:0});
$('.jspPane').css({width:'+=' + $('.jspTrack').width()});

демо в http://jsfiddle.net/gaby/DsDQP/8/

Пересчет должен вызываться после каждой повторной инициализации.

Это необходимо, поскольку добавляется ширина jspPane ( содержимое )через javascript путем вычисления ширины контейнера и удаления verticalGutter и .jspTrack width.В качестве альтернативы вы можете переопределить ширину с помощью CSS и использовать директиву !important, чтобы переопределить ширину, добавленную через javascript, как @ Evgeny в комментариях.

Answer 2

Вы можете поместить отрицательное значение verticalGutter при инициализации jScrollPane, и это сделает свое дело без дополнительных действий.

$('.scroll-pane').jScrollPane({verticalGutter:-100})

http://jsfiddle.net/DsDQP/50/

Answer 3

Вы можете попытаться сделать это так .....

    //Should it (the #parentContainer) have had a "scroll-pane" class

        $('#parentContainer').jScrollPane()

    $.each(data, function(i, value) {

//Detach scrolling capabilities
        $('#parentContainer').jScrollPaneRemove();

        $('<div/>',{
        class:'anyClass',
        id:'anyId'
        })
        .appendTo(#childContainer);

//Return back Scrolling capabilities to the parent container    
        $('#parentContainer').jScrollPane();            


        ///-> Loop Ends
                });

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

Надеюсь, это поможет ....

Ebest