Horizontal scroll is not working on mouse scroll

[Sudhanshu Jain]

Hi ,

Below is the issue and expected output,

Issue: When the nodes/connectors exceed the view width and there is a need to scroll the page horizontally , we see that the page is vertically scrolled and not able to view the rest of the workflows.

Expected output : When we scroll horizontally , the page should scroll to the right swiftly and update the view ( the nodes/connectors which were hidden has to be displayed).

Please let me know if there is any solution to achieve the expected output.

Thanks

[Shyam G]

Hi Sudhanshu Jain, 

By Default, when the diagram nodes and connectors exceeds the diagram view width and height, the horizontal and vertical diagram scrollbar appears.  You can scroll vertically using mousescroll and horizontally scroll using shift+mousescroll. Before looking into your requirement, could you please confirm us whether a horizontal scrollbar doesn’t appears or could not able to move the horizontal scrollbar? Please share us more details such as a screenshot or video to demonstrate an issue at our end.  

Sample: https://stackblitz.com/edit/react-xgz4ph?file=index.js 

Regards, 

Shyam G 

[Sudhanshu Jain]

Hi Shyam,

We were trying to scroll right using mouse-scroll for horizontal scroll instead of shift+scroll, is there a way to scroll horizontally apart from shift+scroll or can that functionality be changed?

Thanks

[Shyam G]

Hi Sudhanshu Jain, 

 

The options available to move the horizontal scrollbar dynamically are given below. 

 

1. We can pan the diagram to view entire diagram that automatically updates the scrollbar. Please refer to a below sample
2. Use scrollSettings horizontalOffset value to change the horizontal scrollbar by clicking on the button. Please refer to a code example and sample below

 

Code example: 

updatescrolloffset() { 

      //change the scrollbar offset value dynamically 

      diagramInstance.scrollSettings.horizontalOffset = 1000;  

    } 

 

You can finally use shift + scroll to dynamically move the horizontal scrollbar. 

 

Sample: https://stackblitz.com/edit/react-xgz4ph-ralhcp?file=index.js 

 

Regards, 

Shyam G 

[Sudhanshu Jain]

Thanks Shyam for providing the details.

[Shyam G]

Hi Sudhanshu Jain, 

Thanks for your update. 

Regards, 

Shyam G 

[Sudhanshu Jain]

Hi Shyam,

Horizontal scroll is not swift enough even with shift + mouse scroll.

Is there any other property to be set along in Diagram component?

Regards,

Sudhanshu

[Shyam G]

Hi Sudhanshu, 

 

We could not able to replicate an issue at our end. Could you please check in the below sample?. Still if you face issues, please share us more details such as video to demonstrate an issue. 

 

Sample: https://stackblitz.com/edit/react-xgz4ph-ralhcp?file=index.js  

 

Regards, 

Shyam G 

[Sudhanshu Jain]

Hi Shyam,

In the sample demo which you have provided , i observed that with shift + scroll there is a lag in scroll, i.e. the scroll happens the opposite direction a bit and then in forward direction.

Regards,

Sudhanshu

[Shyam G]

Hi Sudhanshu, 

 

Please look at a demo below where we used shift+mousewheel to scroll the diagram. We couldn't find a scrolling delay. Could you please share us more details such as browser version, OS and video to demonstrate an issue. 

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScrollingIssuevideo193630944 

 

Sample: https://stackblitz.com/edit/react-xgz4ph-ralhcp?file=index.js  

 

Regards, 

Shyam G 

[Sudhanshu Jain]

Hi Shyam, 

We had discussed regarding this issue over call, we had concluded that this issue is happening for MAC and you would get back with a solution, could you please provide an update regarding the same.

Thanks

[Shyam G]

Hi Sudhanshu, 

 

We have checked the below sample in stackblitz and the scrolling works fine without lag in MAC machine. Could you please check in the below sample? Still, if you face any issues, please share us more details such as video to demonstrate an issue with the below sample. 

 

Sample: https://stackblitz.com/edit/react-f6ujo7?file=index.js 

 

Regards, 

Shyam G