CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9412

Angular Directive to ScrollLeft on Drag Bug

I wrote an angular directive called dragscroll which scrolls a horizontal overflowing element right or left based on dragging on the canvas.

Please refer to this fiddle

How it works: 
1. Horizontal scroll is at 0.
2. Mousedown at the right end of the div and while holding it
3. Mousemove left 
4. Page scrolls right. 
5. Mouseup stops the dragging.
And Vice versa.

However there is a bug. 

This occurs when
1. the horizontal scrollbar is in the middle of the div, 
2. you "mousedown" on any part of the canvas (pink) part and 
3.  mousemove to the left edge, and hold it,

 the scroll happens continuously, which is not the desired behavior. I have not coded any scrollLeft behavior for this kind of event. Dont know why it is happening.

Please help.

Upvotes: 1

Views: 1520

Answers (1)

themyth92
themyth92

Reputation: 1738

The problem seems like because of default behavior of scrolling event outside of windows browser. What you can do is to stop this default behavior by adding e.preventDefault() inside your horizontalScroll method.

Working fiddle

Upvotes: 1

Related Questions