Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to scroll content of the page? (that sits outside of Ionic) #1792

Closed
stefek99 opened this issue Jul 16, 2014 · 4 comments
Closed

How to scroll content of the page? (that sits outside of Ionic) #1792

stefek99 opened this issue Jul 16, 2014 · 4 comments

Comments

@stefek99
Copy link

I'm using Ionic to build a mobile web app.
On larger screen I'm displaying an image:
screen shot 2014-07-16 at 18 29 43

At first I was using iframe but that was causing issues on iOS, eventually ended up using this: #1534 (comment)

Now that causes problems with scrolling:

Video: https://www.youtube.com/watch?v=ShNQr3eNUCM (2m 25s)

Plunker: http://plnkr.co/edit/TNU6iQN30WZgmqwg80Tl?p=preview

I wonder which CSS classes shall I modify to allow scrolling on body?

I know that it is outside core mission of Ionic but I'm pretty sure you can give me a hint.

Related question on SO: http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling

Thanks!
@stefek99
Copy link
Author

Minimal viable test case:

<!DOCTYPE html>
<html>
<head>

  <!-- <link rel="stylesheet" href="ionic.css"></link> -->
  <link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css"></link>

</head>
<body>

  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>
  <h3>cannot scroll</h3>

</body>
</html>

(still trying to figure out which CSS properties should be removed in order for scrolling to work)

@stefek99
Copy link
Author

Eureka moment :)

html, body {
  overflow: visible !important;
}

@calendee
Copy link

@stefek99 Where are you putting that CSS? In the main page or the iframe that holds the Ionic app?

@simonqian
Copy link

add two styles: scroll-content overflow-scroll

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@calendee @stefek99 @simonqian