Horizontal scroll is not working on mouse scroll

Sudhanshu Jain

Asked On September 6, 2019 07:51 AM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 9, 2019 06:19 AM UTC

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

Reply | Reply with quote

Sudhanshu Jain

Replied On September 11, 2019 07:41 AM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 12, 2019 04:36 AM UTC

Hi Sudhanshu Jain,

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

We can pan the diagram to view entire diagram that automatically updates the scrollbar. Please refer to a below sample
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

Reply | Reply with quote

Sudhanshu Jain

Replied On September 12, 2019 09:25 AM UTC

Thanks Shyam for providing the details.

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 12, 2019 12:04 PM UTC

Hi Sudhanshu Jain,

Thanks for your update.

Regards,

Shyam G

Reply | Reply with quote

Sudhanshu Jain

Replied On November 5, 2019 03:12 PM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 6, 2019 12:51 PM UTC

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

Reply | Reply with quote

Sudhanshu Jain

Replied On November 7, 2019 05:48 AM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 8, 2019 04:21 AM UTC

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

Reply | Reply with quote

Sudhanshu Jain

Replied On December 27, 2019 06:42 AM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On December 31, 2019 10:57 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147330	Sep 6,2019 07:51 AM UTC	Dec 31,2019 10:57 AM UTC	React - EJ 2	11

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US