Element blocking scroll event

Question

I have a scrolling menu (ul) which, when hovering over a list item, creates a hovering copy. This menu has a scrollbar when the elements overflow. Since the hovering copy's top and left are exactly that of the list items, it blocks the menu from being scrolled.

Here's the code i'm using, along with a jsfiddle. The fiddle is styled so use that, I will post code below for quick reference

Relevant Html (Lots of Li's to cause overflow):

<div class='popup'>
    <div class="page">
        <div class="pagescroll">
            <ul>
                <li class="li-page">Hovering</li>

                ...

                <li class="li-page">Hovering</li>
            </ul>
        </div>
        <ul class="noteslist">
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
            <li class="box contents-selected">
                <p contenteditable='true' contenteditable="true" class="contents">Note contents...</p>
            </li>
        </ul>
    </div>
</div>

Javascript:

PageHoverActions();

function PageHoverActions() {

    var fontAnimateTimer;
    //Adds hover
    $('.li-page').on('mouseover', function (e) {
        if (fontAnimateTimer) {
            window.clearInterval(fontAnimateTimer);
        }

        var el, hoverel, fontSize, rect;
        el = this;
        rect = el.getBoundingClientRect(); //rect alows us to position things beautifully
        fontSize = 12;


        $('.li-page-hover').remove();
        //hoverel is the hovering element
        hoverel = $(this)
            .clone()
            .addClass('li-page-hover')
            .css({
            'top': rect.top,
                'left': rect.left
        })
            .appendTo(document.body)
            .click(PageClickActions);
        //Magnifies text
        fontAnimateTimer = window.setInterval(function () {
            if (fontSize < 20) {
                hoverel[0].style.fontSize = fontSize + 'pt';
                fontSize++;
            } else {
                window.clearInterval(fontAnimateTimer);
            }
        }, 20);

    });


}

Answer 1

You can use something like pointer-events in css.

.li-page-hover {
    pointer-events: none;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

http://caniuse.com/pointer-events

EDIT If you want to go further, this is also worth to look at:

https://github.com/polymer/PointerEvents

Answer 2

You can add this to your page:

.li-page-hover {
    pointer-events: none;
    cursor: pointer; /* if you want to keep your cursor as a pointer */
}