feat: range should not disable scroll on desktop

[Yaro96]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

"scroll-y" class is removed from "main"

If the content is big enough to have a scrollbar, any ion-range on the same page remove the scrollbar when it's being activated. Maybe on mobile this is the correct behavior since the drag and scroll are connected, but not on desktop. As you will see the content jump to fill the space of the missing scrollbar

Expected Behavior

The content on the page should not move. If you remove the scrollbar, at least add a padding-right in the meantime

Steps to Reproduce

Any page with a Lorem Ipsum and Ion-Range

Code Reproduction URL

https://stackblitz.com/edit/angular-an3es6?file=src%2Fapp%2Fapp.component.html

Ionic Info

Ionic:

Ionic CLI : 6.13.1 (C:\Users\BershYar\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework
: @ionic/angu : @ionic/angular 6.1.12 @angular-devkit/build-angular : 12.0.5
@angular-devkit/schematics : 12.0.5
@angular/cli : 12.0.5
@ionic/angular-toolkit : 4.0.0

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v14.16.0 (C:\Program Files\nodejs\node.exe) npm : 6.14.11 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. We should be able to resolve this by having the ion-range gesture use Pointer events instead of the typical mouse/touch events.

I am going to mark this as a feature since it requires an update to our gesture utility.

[anthonychaussin]

I have the same probleme, have you find a work around ?

[anthonychaussin]

Someone have found a work around since ?

[anthonychaussin]

@Yaro96 in your exemple you can bypass the bug with

ion-content::part(scroll) {
  overflow-y: auto !important;
}

hope it will help peoples

[pecknigel]

Any progress on this?