元素阻塞滚动事件答案

【问题标题】：Element blocking scroll event元素阻塞滚动事件
【发布时间】：2023-03-23 21:43:01
【问题描述】：

我有一个滚动菜单 (ul)，当悬停在列表项上时，它会创建一个悬停副本。当元素溢出时，此菜单有一个滚动条。由于悬停副本的顶部和左侧正是列表项的顶部和左侧，因此它会阻止菜单滚动。

这是我正在使用的代码以及jsfiddle。小提琴的样式是这样使用的，我将在下面发布代码以供快速参考

相关Html（很多李氏会导致溢出）：

<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);

    });


}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以在 css 中使用 pointer-events 之类的东西。

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

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

http://caniuse.com/pointer-events

编辑如果你想更进一步，这个也值得一看：

https://github.com/polymer/PointerEvents

【讨论】：

哇。这是什么魔法？
该元素需要仍然是可点击的，有什么办法让它仍然可以监听吗？
我会尝试使用 polyfill 或自定义 js/jQuery 解决方案，具体取决于我会采取多远。

【解决方案2】：

您可以将其添加到您的页面：

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

【讨论】：