0

I'm trying to create a mobile message feed that scrolls smoothly on mobile using touch. I've found that divs scroll really nicely on mobile when the css height is set to 100%. I need to capture the scroll event to know when the user has scrolled to the bottom to be able to fetch the next batch of messages and add them to the list. But unfortunately the scroll event doesn't fire when the height of the div is set to 100%. And when I remove the height: 100% from the div css, the scrolling is slow and jerky on my Android.

Does anyone know either;

  • a) how to make divs scroll really smoothly on mobile without height: 100%,
  • b) get the scroll event to fire on the page when the height: 100% is set, or
  • c) other events that I could use to know when the user has scrolled to near the bottom of the page?

I've tried -webkit-overflow-scrolling: touch, position: absolute and min-height: 100% from other answers and suggestions I've seen but these don't seem to make any difference.

many thanks in advance

Mikee
  • 61
  • 5
  • you can not specify height 100% in div. It is auto increased with its child content. – Raju Padhara May 28 '14 at 09:16
  • Sorry, I mean the parent div of the div with the added content. When it is not set to height: 100% the scrolling on mobile is not smooth – Mikee May 28 '14 at 12:44

1 Answers1

0

Therefore it is mobile you could use jQuery touch events?

I think this problem was similar: jQuery live scroll event on mobile (work around)

The easy way would be using scrollTop() just to get the position when the user stops scrolling, you just have to decide whether that would be an appropriate behaviour.

Community
  • 1
  • 1
RodrigoDela
  • 1,706
  • 12
  • 26
  • Yes - I've tried using jQuery scrollTop but it always returns zero when the parent div height is set to 100%. When the parent div height is not set I don't get smooth scrolling on mobile – Mikee May 28 '14 at 12:42