search

Famous / famous-angular

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.
https://famo.us/angular
Mozilla Public License 2.0
1.92k stars 275 forks source link

Scrollview won't scroll. #234

Open bennewton999 opened 10 years ago

bennewton999 commented 10 years ago

I have the following code and the misc html in the fa-surface is larger than the fa-app container, yet I cannot scroll down. the scroll event is registering because it does move the element, but it immediately snaps back to the default position.

If I set the fa-size to a fixed height, the scroll works. However, I don't know the height of the misc html so I need to use undefined.

Am I missing something? Thanks.

<fa-app>
  <fa-scroll-view fa-pipe-from="eventHandler">
    <fa-view>
      <fa-surface  fa-pipe-to="eventHandler"  fa-size="[undefined, undefined]">misc html</fa-surface>
    </fa-view>
  </fa-scroll-view>
</fa-app>
steveblue commented 10 years ago

Setting the size of the surface to [undefined, undefined] will make the size the height and width of the window, thus not allowing you to scroll. If you are not sure of the height of the content, you can set the size to [undefined, true] which replicates the effect of height: auto. Your example should be formatted as follows using a modifier that modifies both the fa-view and fa-surface and if you sequence 3 views that add up to a height taller than the window you should see the window scroll: 

<fa-app>
  <fa-scroll-view fa-pipe-from="eventHandler">
    <fa-modifier fa-size="[undefined,undefined]">
      <fa-view fa-index="0">
        <fa-surface  fa-pipe-to="eventHandler">misc html</fa-surface>
      </fa-view>
      <fa-view fa-index="1">
        <fa-surface  fa-pipe-to="eventHandler"> another misc html</fa-surface>
      </fa-view>
      <fa-view fa-index="2">
        <fa-surface  fa-pipe-to="eventHandler">yet another misc html</fa-surface>
      </fa-view>
    </fa-modifier>
  </fa-scroll-view>
</fa-app>
bennewton999 commented 10 years ago

I have tried setting the size of fa-modifier to [undefined, true], but that did not make a difference. I have since worked around this by checking the height of the container div in the surface on scroll and assigning it to the fa-size of te modifier. See here for the full code of the work around.

http://stackoverflow.com/questions/26445552/scroll-view-not-scrolling-with-surface-fa-size-undefined-true

But it feels like a hack and I am not sure exactly what is wrong with my html now.

The full html code of the page is here showing the misc html that is included. :

https://gist.github.com/bennewton999/be3bee456903007ff797

steveblue commented 10 years ago

I just posted a workaround I came up with on StackOverflow for the handling of true sizing for surfaces in the scrollview. This isn't an issue with scrollview really, but an issue with true size in F/A, It seems like a feature that didn't make it into Famous/Angular 0.5.0 but is available in Famo.us 0.3.0. @zackbrown do you know the status of true sizing in F/A?

http://stackoverflow.com/questions/26445552/scroll-view-not-scrolling-with-surface-fa-size-undefined-true/26534407#26534407

5inline commented 9 years ago

Was there any resolution to this? I'm getting pretty sick of fighting scrollview. Is there a way to just allow native scroll?

jordanpapaleo commented 9 years ago

@5inline Sorry for your frustrations. Please create an issue and a codepen with your specific problem and I will try to help out.

Thanks,

Jordan

steveblue commented 9 years ago

@5inline The famous scrollview is way more performant than native scroll. But it does have some issues. One other strategy is to use a GenericSync that maps touch and scroll events to one handler and roll your own view. Other things to remember are that true sizing only seems to work with the Scrollview when sequencing surfaces with the size explicitly set on each surface, or with the help of a Service like above. I really hope famo.us concentrates on bug fixes for the scrollview and 'true' sizing for an upcoming release.