Adding a scroll bar to a text field?

[CueTable]

Hi

 

In GSAP JS, how do you add a scroll bar to a text field so the user can scroll up and down by dragging the scroll bar?

 

Could you show me a simple example on how to do this?

 

Thanks,

W

 

[Jonathan]

Hello and Welcome to the GreenSock Forums..

 

you can add the css overflow property:

 

See the Pen eEvcd by jonathan (@jonathan) on CodePen

 

div {
       overflow:auto;
}

make sure you add a width and definitely a height to your div so the browser can render the scroll bars

 

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

 

you might have to play with the width so you don't get horizontal scroll bars

 

overflow-x and overlfow-y might need a vendor prefix due to the fact that they are experimental css properties that are not supported the same in all browsers

 

[CueTable]

Hi

 

Thanks for the quick response.

 

I would like to use my own scroll bar graphics instead of the os graphics.

 

W

[Jonathan]

for that you would need to make your own Scrollbar UI with HTML, CSS, JS.. since the browsers styling is based on the operating system

 

OR you can look at these jQuery ones and just change css and images

 

http://jscrollpane.kelvinluck.com/

http://manos.malihu.gr/jquery-custom-content-scroller/

http://baijs.nl/tinyscrollbar/

 

[CueTable]

Thanks for the links, I will look into them now...

 

I also found this to be useful, although not quite what I wanted:

 

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/

[Jonathan]

great link

[Jonathan]

Also have you looked at GSAP Draggable and ThrowProps Plugins?

 

http://www.greensock.com/draggable/

 

It has functionality to Scroll (Drag and Flick)

[CueTable]

Your links are great.

 

Basically I just wonder if there is a way to do things in your 2nd example in GSAP. http://manos.malihu....ntent-scroller/

 

That example uses jquery. 

[Jonathan]

it is possible with GSAP.. you can create anything and everything that has any type of animation functionality using GSAP.

 

GSAP handles animation way better than jQuery or any other javascript library that tries to animate .

 

check out

 

http://www.greensock.com/why-gsap/

 

http://www.greensock.com/get-started-js/

[Rodrigo]

Hi,

 

A few days ago amar posted a similar question and looking and experimenting a little bit with this JQuery plugin:

http://manos.malihu.gr/jquery-custom-content-scroller/

 

The results with Draggable aren't very good. That particular plugin works with the left or top property of the content container, while the parent of that one has an overflow:hidden property. When the Draggable instance was set to work with either of those properties the content container did moved, but the custom scrollbar didn't, then when you drag the scrollbar the content goes back to the position it had before being dragged with GSAP.

 

The issue is that the plugin uses it's own code to record the property based on the different scroll events (keys and mouse wheel) but not external ones. The funny thing is that GSAP's Draggable  does respect the current inline style, so if you drag the custom scrollbar and then you use Draggable to move the content you don't get any strange behaviour.

 

One choice could be look and tweak the plugin's code and try to associate the current inline value instead of the recorded one, in order to make it work with Draggable. That could turn into quite a chore considering the fact that you'll need to read and interpret the code in order to make the necessary changes. The second alternative is to create your own scroll/draggable system using only GSAP and your custom graphic base, personally I'd choose this one, for consistency and animation efficiency reasons, GSAP is so much better than JQuery in animation every day of the week and twice every day of the week again

 

You'll have to test the other plugins Jonathan posted in order to see how they work with Draggable.

 

Best,

Rodrigo.

[Rodrigo]

Hi,

 

Please check this reply by Amar in the post I mentioned in my previous reply, because he found a workaround for the plugin not working along with GSAP. Hopefully this will help you as well.

 

Rodrigo.