AutoScroll Fixed Header Issue

[venkateshrajendran]

Describe the bug
My app has sticky header and due to auto scroll the highlighted part is going behind the header and highlighting also doesn't work properly. This also has some side effects as well it returns incorrect values if body elem doesn't have scroll and some custom child elem of body has scrollbar.

To Reproduce
Here is reproduction of bug. https://stackblitz.com/edit/angular-aeab5y
Note: Works fine with higher resolution and element is within view port but fails if element to be highlighted overflows beyond view port.

Expected behavior
Please find in the attached screenshot.

Screenshots
Actual Behaviour:

Expected Behaviour:

Details (please complete the following information):

• Browser Chrome
• List of the dependencies with their version
  Angular - 7 & 8 (tried in both versions)
  Rxjs - 6.x.x
  ngx-joyride - 2.2.10

Comments:
I have found a fix for this issue. Raising the pull request for the same, please review it.

[kanthvallampati]

I'm also facing the same issue.
@venkateshrajendran I would like to try out your solution.

[kanthvallampati]

@tnicola Do you have any plan of action for the above issue?
The solution proposed by the reporter seems fine for me. It would be great if you provide any update on this.

[tnicola]

Hi all, I'm having a look at this issue. @venkateshrajendran thanks for your PR. It seems there are some conflicts right now.

[kanthvallampati]

@tnicola Thanks for the update. A quick resolution for the issue is highly appreciated.

[kanthvallampati]

@tnicola any update on the issue ?

[vijaycreatise]

I'm also having the same problem. @venkateshrajendran can you please share the solution.

[epiphanizer]

We are also having this issue on our side. Any resolution to this?

[kanthvallampati]

Hi All,

Try the fix provided here - #87.

It worked for me. I think it works for you as well.

[kishorekumarvajravel]

Hi All,

Kindly use this for reference,

`
/**

• @method scroll
• @param id
  */
  scroll(id) {
  const blue = document.getElementById(id);
  let position = blue.getBoundingClientRect();
  window.scrollTo(position.left, position.top + window.scrollY - 150);
  }
  `

And use the function in the inside the step function

this.joyrideService.startTour( { steps: this.filterTourSteps, showCounter: false, stepDefaultPosition: 'bottom', themeColor: this.themeColor, showPrevButton: true, logsEnabled: false, waitingTime: 600 } ).subscribe( step => { this.scroll(step.name) }, e => { }, () => { this.doneTour(); } ); } catch (err) { } } });

It will be scrolled to the positions on the target container.

Thanks.

[cristiancajiaos]

Had this problem with an Apex similar template. @kishorekumarvajravel, it worked for me. Thanks :)