Smoothly scrolling a list of contenteditable divs


#1

Hi. I’m trying to smoothly scroll a list of contenteditable divs. I’ve been playing with some techniques here: http://plnkr.co/edit/RTFbFE?p=preview but as you’ll see the top part of the document is blank when it starts to scroll. I tried using ‘margin-top’ also, but that had the same result.

Any ideas how to fix that? Or suggestions for a better technique?

Background:

I’m trying to create a little note taking app which will consist of a list of contenteditable divs. My original issue is that divs don’t scroll into view when the keyboard pops up. I’m using the new keyboard plugin though, so I figured I can just use the keyboard shown event and calculate how much I have to scroll.

I want to create a proof of concept first where I just scroll the content area a certain amount. The first issue I had is that if I use the default Ionic scroll then the view doesn’t scroll, so I’m using overflow-scroll=“true” and that’s working fine.

To scroll the content, I can set the .scrollTop property of the scroll container and that works but is very jumpy so I’d like to animate the scroll.

Thanks