2

I’m trying to achieve the behaviour – for example – the Twitter Mac client:

I got a box I can scroll in (overflow Y, fixed height), and I got several blocks inside. I want to add a new block before all others, but make it invisible to the user: so when there’s a new block added before, user have to scroll to the top to view it.

How would you achieve this? (JS powered of course, but must be touch-devices ready, and iP* do not run JS while scrolling).

Thanks!

Joan
  • 659
  • 2
  • 7
  • 20
  • 2
    You could try scrolling down immediately after inserting the element, by an amount equal to the height of the new element added? – Shreyas Dec 02 '13 at 19:47
  • I was indeed thinking about adding and scroll the height of inserted element, but it sometimes means a visible flash (kill the scroll when user is scrolling) – Joan Dec 03 '13 at 09:05
  • Yeah, there might be a small flash, you could make the page overflow:hidden with the new scroll position and that might make take the flash away. – Shreyas Dec 03 '13 at 12:10

1 Answers1

2

I tried out changing the scrollTop after the element is added, and it seems to work fine on Chrome. You would have to check it out in other browsers.

$(document).scrollTop($(document).scrollTop() + elmHeight);

http://jsfiddle.net/ub5BU/

Shreyas
  • 1,462
  • 9
  • 11
  • I tried something like that, and this is so far the best solution I found. But there's still some problems with mouses intertia (Mac mouses), and they are strange behaviours with touch devices… Cf. http://jsfiddle.net/ub5BU/1/ – Joan Dec 04 '13 at 13:23