feat: Where is IonScroll?

[kevinswartz]

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 include this feature request, without success.

Describe the Feature Request

In previous versions of Ionic, there were IonScroll components that allowed you to pinch-zoom and scroll around within an area. I can't find any documentation on this currently. Here's the component from ionic v1 - https://ionicframework.com/docs/v1/api/directive/ionScroll/

Here is a similar issue: (https://github.com/ionic-team/ionic-framework/issues/22805). However the workaround described has numerous side effects, and does not allow for a zoomable/scrollable area within an IonContent. Instead the whole page, including page header zooms.

Describe the Use Case

A great use case is a document viewer, with pages tiled vertically, that allows you to zoom in and see individual pages while still allowing you to vertically scroll at the higher magnification.

Describe Preferred Solution

I would like to be able to specify page content that can be zoomed and scrolled with min/max zoom levels. Very much like the v1 ion-scroll component

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the report. IonScroll was removed in favor of IonContent. There were a few things that IonScroll provided:

1. A scrollable area with JS-driven scrolling
2. Functionality to scroll content to top when the status bar was tapped.
3. JS-driven pinch to zoom.

Feature 1 is no longer needed as browsers can provide performant scrolling. Ionic now uses the same scrolling behaviors that traditional native apps use inside of IonContent.

Feature 2 has been preserved in IonContent.

Feature 3 has been removed. The browser provides performant pinch-to-zoom behaviors, so this custom implementation is no longer needed. However, as you noted the pinch to zoom behavior built into the browser zooms the entire page instead of a particular section.

---

At the moment we have no plans to reintroduce this selective pinch to zoom behavior. The resolution for https://github.com/ionic-team/ionic-framework/issues/22805 was implemented for accessibility purposes. Users should be able to pinch to zoom anywhere on a web application in order to zoom the page in. Selectively making parts of the page zoomable can lead to a frustrating user experience.

We recommend displaying the document in a separate view. There are a couple ways to do this:

1. If you are in a browser, you can open the document in a new tab. The browser's built-in document viewer will activate if the file is in a supported format (PDFs, for example).
2. If you are in Capacitor, you can open the document using the Browser Plugin. This will open the document in a separate view but keep your users inside of your application.

[kevinswartz]

Ok thanks for the response. I still think the ability to pinch zoom within an area is still useful, and allows for better customization of the app experience. The current pinch-zoom behavior with IonContent has side effects that are difficult to work around. However I was able to acheive the desired behavior using react-zoom-pan-pinch, so I have a path forward. Thanks for your help!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.