Problem with scroll

[ArrogantCoder]

Hello everyone!

I made a resource with a grid list on DX. Could you please tell me, how to make the scrollbar move with the mouse by holding?

Edited November 3, 2021 by ArrogantCoder

[The_GTA]

Hello ArrogantCoder,

in order to move the scroll bar with the mouse you have to implement attachment. A scrollbar that is attached to the mouse cursor is moving in the same direction as the cursor, limited by the scrollbar's own bounds. The math behind it is pretty simple. You remember the (x,y) position of the cursor and of the scrollbar (in pixels) on click. We define the pixel position of the scrollbar as the top-most (vertical) or left-most (horizontal) pixel of it. Then for each mouse movement you calculate the new position:

new scrollbar pixel-pos = old-scrollbar-pixel-pos-at-click + ( current-cursor-pos - old-cursor-pos-at-click )

You only have to calculate one dimension: y dimension of vertical scrollbar, x dimension of horizontal scrollbar (scrollbar-pixel-dim)

Then you need to transform the new pixel position to scrollbar-percentage.

scrollbar-perc = min( 1, max( 0, scrollbar-pixel-dim / ( scrollbar-area-size-dim - scrollbar-size-dim ) ) )

where scrollbar-area-size-dim is the width of the horizontal scrollbar containment area, scrollbar-size-dim is the width of the scrollbar control that you can click on, scrollbar-area-size-dim >= scrollbar-size-dim (analogous definition for vertical scrollbar).

Feel free to ask if you have any further questions. 

Other relevant information:

• https://forum.multitheftauto.com/topic/132337-how-to-create-custom-guidashboard/?do=findComment&comment=1000972

Edited November 3, 2021 by The_GTA

[ArrogantCoder]

2 minutes ago, The_GTA said:

Hello ArrogantCoder,

in order to move the scroll bar with the mouse you have to implement attachment. A scrollbar that is attached to the mouse cursor is moving in the same direction as the cursor, limited by the scrollbar's own bounds. The math behind it is pretty simple. You remember the (x,y) position of the cursor and of the scrollbar (in pixels) on click. We define the pixel position of the scrollbar as the top-most (vertical) or left-most (horizontal) pixel of it. Then for each mouse movement you calculate the new position:

new scrollbar pixel-pos = old-scrollbar-pixel-pos-at-click + ( current-cursor-pos - old-cursor-pos-at-click )

You only have to calculate one dimension: y dimension of vertical scrollbar, x dimension of horizontal scrollbar (scrollbar-pixel-dim)

Then you need to transform the new pixel position to scrollbar-percentage.

scrollbar-perc = min( 1, max( 0, scrollbar-pixel-dim / ( scrollbar-area-size-dim - scrollbar-size-dim ) ) )

where scrollbar-area-size-dim is the width of the horizontal scrollbar containment area, scrollbar-size-dim is the width of the scrollbar control that you can click on, scrollbar-area-size-dim >= scrollbar-size-dim (analogous definition for vertical scrollbar).

Feel free to ask if you have any further questions. 

Other relevant information:

• https://forum.multitheftauto.com/topic/132337-how-to-create-custom-guidashboard/?do=findComment&comment=1000972

thanks a lot, your explanation helped!

[The_GTA]

2 hours ago, ArrogantCoder said:

thanks a lot, your explanation helped!

You're welcome! I wish you a good experience when trying to implement it. By doing projects such as resedit I have a lot of experience when it comes to designing custom UI elements. Don't shy away to consult me again if the implementation is troubling you.

...

Regarding the private message you sent me, ...

How about you start with drawing code for the scrollbar? You need to draw a container for the rectangle, then inside of it a (clickable) rectangle. Maybe you add some arrows at the beginning and end.

I suggest you this because then it may be easier to understand by visuals. The description I gave you in the thread is complete so you may have an issue understanding it.

Edited November 3, 2021 by The_GTA