fix(content) set overscroll-behavior based on the scroll direction of…

[haydenbr]

This is kind of a placeholder PR for #20010. I went ahead and just split out overscroll-behavior into overscroll-behavior-x and overscroll-behavior-y. I can change this based on feedback.

fix(content) set overscroll-behavior based on the scroll direction of ion-content

By setting overscroll-behavior-y and overscroll-behavior-x based on the scroll direction of ion-content instead of overscroll-behavior for both x and y scrolling, we prevent unwanted side effects that may prevent parent elements from scrolling in some edge cases.

closes #20010

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

overscroll-behavior is set for both x and y directions

Issue Number: #20010

What is the new behavior?

only sets overscroll-behavior for the direction that the ion-content is scrolling.

Does this introduce a breaking change?

• Yes
• No (as far as I know. I could be wrong)

[brandyscarney]

Thanks for the PR! Is there any way you could provide some small reproduction code using Codepen (https://codepen.io/pen?template=aXENNW) or a similar code editor?

[haydenbr]

@brandyscarney yes I think I can get a reproduction this weekend.

[haydenbr]

Hi @brandyscarney. I have a reproduction for you.

https://stackblitz.com/edit/ionic-virtual-scroll-overscroll-behavior?file=src%2Fapp%2Fapp.component.ts

To reproduce, when the page first loads, you'll see three ion-contents with virtual scrolls inside, all lined up horizontally. They will overflow the page, allowing a horizontal scroll. Place your cursor on top of one of the three ion-contents and attempt to scroll horizontally with your track pad. You'll notice that nothing happens. You have to move the cursor off of the ion-content to be able to scroll.

There's a "FIX OVERSCROLL" button at the top of the page. I rigged it up to hack in the style change my PR introduces. After clicking this, you should now be able to scroll horizontally with your cursor on top of any of the three ion-contents. And the vertical scroll inside the ion-content still works as expected.

In the originally issue I opened, I also proposed using css variables instead of hard-coding the overscroll behavior, in case someone did need to have more control over this.

Thanks for your time and consideration!

[liamdebeasi]

Merged. Thank you!

[haydenbr]

Thanks so much for reviewing and merging 🙏