gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.8k stars 525 forks source link

Scrolling issue #877

Closed irtaza9 closed 1 year ago

irtaza9 commented 1 year ago

Bug

when I click on next button it goes to next step but the ride does not follow the position that I added in the tour.

Code

<Joyride
        continuous
        showProgress
        showSkipButton
        disableScrolling={true}
        steps={steps}
        run={true}
        scrollOffset={129}
        callback={handleCallback}
        styles={{
          options: {
            arrowColor: "#ffffff",
            backgroundColor: "#ffffff",
            textColor: "#004a14",
            zIndex: 1000,
          },
          tooltip: {
            borderRadius: "20px",
            padding: 0,
          },
          tooltipFooter: {
            backgroundColor: "#1776EE",
            color: "#ffffff",
            borderBottomLeftRadius: "20px",
            borderBottomRightRadius: "20px",
          },
          buttonNext: {
            backgroundColor: "#1776EE",
            color: "#ffffff",
            marginRight: "10px",
            borderBottomRightRadius: "20px",
          },
          buttonSkip: {
            color: "#ffffff",
            marginLeft: "10px",
          },
          buttonBack: {
            backgroundColor: "#1776EE",
            color: "#ffffff",
            marginRight: "10px",
            borderBottomRightRadius: "20px",
          },
          tooltipContent: {
            paddingTop: "30px",
            paddingLeft: "30px",
            paddingRight: "30px",
          },
        }}
      />

steps

export const MediaSteps = [
  {
    content: "1",
    target: ".uploadmedia",
    placement: "auto",
  },
  {
    content: "2",
    target: ".media_tabview_box",
    placement: "top-start",
  },
  {
    content: "3",
    target: ".media_tabview_box",
    placement: "top",
  },
];

Video

https://user-images.githubusercontent.com/98938307/209566290-83a0aa8d-07ee-4411-be0a-41a60ae70718.mp4

Required

I want to make it static, no scroll. I should follow the position that is mentioned in the steps array.

gilbarbara commented 1 year ago

You can use the disableScrolling prop.

irtaza9 commented 1 year ago
     <Joyride
        continuous
        showProgress
        showSkipButton
        disableScrolling={true}

I'm passing this prop as true but it does not show any effect on the positioning behavior

gilbarbara commented 1 year ago

Please create a minimal reproducible example in codesandbox or similar.

Link to repl or repo (highly encouraged) Please provide a https://codesandbox.io/ demo or similar. Issues without a reproduction link are likely to stall.

irtaza9 commented 1 year ago

Anydesk?

gilbarbara commented 1 year ago

Nope, code playground with shareable public links