1

I'm having a problem with Sly scrollbars.

I want to set up a timline in which I cann scroll by dragging with the mouse and with a scrollbar. Scrolling with the mouse works fine but I can't get the scrollbar to work and there is no proper documentation.

Also there are no errors on the console.

this is my scrollbar:

<div id="scrollbar">
    <div class="handle"></div>
</div>

this is the css:

#scrollbar {
    width: 100%;
    height: 30px;
    background: #f00;
    margin-top: 10px;
    line-height: 0;
}
#scrollbar .handle {
    width: 50px;
    height: 30px;
    background: #00f;
    position: absolute;
}

and the javascript call to initate the scrolling 

$("#timeline").sly({
    dragSource : '.frame',
    horizontal : 1,
    itemNav: 'basic',
    smart : 1,
    activateOn : 'click',
    mouseDragging : 1,
    touchDragging : 1,
    releaseSwing : 1,
    scrollBy : 1,
    activatePageOn : 'click',
    speed : 50,
    easing : 'easeInOutBounce',
    swingSpeed : 0.07,
    elasticBounds : 1,
    dragHandle : 1,
    dynamicHandle : 1,
    clickBar : 1,
    scrollbar : '$("#scrollbar")',
    dragHandle : 1
});

I need this for a university project, so it would be really cool if somebody has a solution to my problem.

OzrenTkalcecKrznaric
  • 5,535
  • 4
  • 34
  • 57
Tobias
  • 95
  • 1
  • 2
  • 9

1 Answers1

2

There are two little mistakes.

Change the line

scrollbar : '$("#scrollbar")'

to

scrollBar : $("#scrollbar")

and everything should work as expected.

friedi
  • 4,350
  • 1
  • 13
  • 19