Question

I have made a drag-to-trigger_event page based on this guide.

I’m displaying list of images in the center of the screen, and sometimes page is larger than window size, so I have to use ‘position:fixed’ for it to always display in the center of the sreen.

I’ve made a tweak that instead of showing simple tooltips after hovering on an icon I display a list of options and after dropping it on an option it causes different reaction.

So, my problem is that when list of option is really long (user-defined) then page is too small to display whole list. With ‘position:absolute’ there is no problem, becouse scrollbars appear and user can scroll down to last positions of the list. But with ‘position:fixed’ there is no way that user could see the whole list becouse scrolling scrolls through whole page with the list fixed in place and whole list is not visible.

Is there any solution for that problem? Maybe a simple multi-column list or a ‘invisible’ scroll only for that list? Or any other simplier solution?

Answer 1

I solved it by dynamically modifying margin-top in window.onScroll() function and still having position:absolute enabling me to view every item on the list.