Scrolling content the natural way (without JS)

ionic-v1
1

Hi!
I’m using the plain Ionic JS file (without angular) and i’m having good time…

for performance reasons i want to disable the JS scrolling (via ionic.views.Scroll) and instead use the default browser scrolling (yes without bouncing etc.)
how this could be possible?

i have this code but overflowing content isn’t scrollable.

<div class="scroll-content has-header">
      <div class="scroll"> here my long content
 </div></div>

thanks

2

overflow-scroll="true" should do the trick

<div class="scroll-content has-header" overflow-scroll="true">
      <div class="scroll"> here my long content </div>
</div>
1 Like
3

tried buy as expected overflow-scroll=“true” didn’t work…
i think beacaus it is an extra attribute that only angular could read.

Actually i’m not using angular but the plain ionic.js + css

4

hmm, do you mind posting a code sample (codepen, plnkr)?

5

Are there any other ways besides overflow-scroll=“true”? I’d like to have overflow-scroll’ing disabled when visiting the pages from any non-mobile device. So for example if someone visits one of the Ionic pages from a Windows PC it would use standard scrolling.

6

Unless you made your own content div, not really. overflow-scroll="true" gets evaluated by angular so theres some ionic magic going on there to set up the scroll.

Besides, Ionic isn’t really targeting desktops/websites.

Ionic is focused on building native/hybrid mobile apps rather than mobile websites.

1 Like
7

Hi!
@mhartington
as i’m not using angular and actually i would like to either not use the JS scrolling of ionic.js there is not much code to show…

Actually i have the HTML i posted before, and in my JS i initialize ionic.views.Scroll on that elements and it works like a charm… i only would like a way to not use JS scrolling. usually a style=“overflow:scroll” works. some day ago i made some test with this ‘trick’ without success.

8

How does this work for you?

9

Add the overflow-scroll class - that’s what the attribute does.

1 Like
10

Great! Thank you!
Really can’t understand why before my tries didn’t work… i did the same things (though i can’t remember perfectly what i wrote)… Anyway this work perfectly.
@andy that worked even better (as i haven’t to write more css).

Thanks both!