Deconstructing XPages Drop Down Button Menus on page Scroll

Question

I'm using xpages extension library to generate drop down menus in the navigation with the following code:

<xe:dropDownButton disableTheme="true" styleClass="menuButton">
        <xe:this.treeNodes>
            <xe:basicContainerNode styleClass="menuTopLevel">
                <xe:this.children>
                    <xe:pageTreeNode label="Create New" page="NewInspection.xsp"
                        styleClass="menuItemSub1">
                    </xe:pageTreeNode>
                    <xe:pageTreeNode label="Reports" page="View.xsp"
                        styleClass="menuItemSub1">
                    </xe:pageTreeNode>
                </xe:this.children>
            </xe:basicContainerNode>
        </xe:this.treeNodes>
    </xe:dropDownButton>

The problem I'm having is that when the user is on a page that is scrollable (That is to say, the height of the page exceeds the height of the content area), and they scroll the page, the menu stays where it is drawn, if it is open, and does not scroll with the page content. I'm looking for a way to deconstruct any/all open menus if the page scrolls, but I'm not having any luck with this in XPages. Has anyone encountered something similar?

Answer 1

I was able to find a solution for this one. Utilizing a code library to determine when I was on the iPad, I loaded a function that added an event that used Dojo to attach an onscroll event bound to the exterior form rather than the window itself. I had to embed this in a script block in my navigation custom control for some reason, it wouldn't attach if I put it elsewhere. Here's the code if anyone else needs it in the future.

dojo.ready( function() {
var object = dojo.byId('view:_id1')
//console.log(object);
dojo.connect(object, 'onscroll', this, function(event) {
    // console.log('scroll');
        var object1 = dojo.byId('#{id:adminDropDown}_ab_0_dropdown')
        if (object1 != null) {
            dojo.style(object1, "display", "none")
        }
        var object1 = dojo.byId('#{id:insDropDown}_ab_0_dropdown')
        if (object1 != null) {
            dojo.style(object1, "display", "none")
        }
        var object1 = dojo.byId('#{id:emDropDown}_ab_0_dropdown')
        if (object1 != null) {
            dojo.style(object1, "display", "none")
        }
        var object1 = dojo.byId('widget_view:_id1:DateEntry_dropdown')
        if (object1 != null) {
            dojo.style(object1, "display", "none")
        }
    });