Html scroll: how to avoid it to "cut" my inner elements

Question

Hi, this question is for an autocomplete drop down list I have to do that will fire while you're writing in an html textbox.

It basically consists of a div containing the suggestion elements, each of them being a div as well.

I got to the point where it's begining to work properly but now I added a vertical scroll to the containing div so you can limit the height of the drop down list, and I got the following behaviour:

If you use the scroll, it scrolls up or down in "pixels", so it cuts my elements making it all look anything but sleek.

I'd like to override the behaviour to go up and down one whole div element when you use the scroll. I don't even know how to google for this...

Anybody knows any useful resource about this or can give any tip as to where to start, if it's possible to override the scroll movement events or I should look into another direction?

Thanks a lot in advance

Note: I cannot use jquery autocomplete plugin.

Answer 1

You could implement your own scrollbar, using mouse events and updating positions manually.

Answer 2

Could you not tap into a 'scroll' event for that element (DOM 3 Events provides a scroll event for an element, not sure how supported it is), such that whenever the scroll position is changed, it calls a little routine of your own that adjusts the scroll position by rounding it to the nearest 'notch'?

Or, you could regularly poll for the scroll position and adjust it when it has moved. This scroll position seems fairly cross-browser.