修复选择的工具提示，滚动时不要移动答案

【问题标题】：Fix tooltip to selection, don't move when scrolling修复选择的工具提示，滚动时不要移动
【发布时间】：2021-02-19 11:52:52
【问题描述】：

我使用 popper.js 将工具提示附加到文本选择。

function generateGetBoundingClientRect(rangeRect) {
    return () => ({
        width: rangeRect.width,
        height: rangeRect.height,
        top: rangeRect.top,
        right: rangeRect.right,
        bottom: rangeRect.bottom,
        left: rangeRect.left,
    });
}

const range = document.getSelection().getRangeAt(0)

const positionElement = {
    getBoundingClientRect: this.generateGetBoundingClientRect(range.getBoundingClientRect()),
    };

const instance = createPopper(positionElement, menu, {placement: 'top'});

不幸的是，这样创建的菜单并没有固定在选择上，而是随着视口滚动。由于这是由translate() 实现的，我假设 popper.js 中有一个选项可以关闭它？

【问题讨论】：

标签： javascript popper.js

【解决方案1】：

答案是相当明显的，而且值得称赞的是 popper.js 团队 - 在documentation。

解决办法是关闭监听滚动事件，可以通过传递eventListener修饰符并设置scroll:false来实现。在代码中：

const instance = createPopper(positionElement, menu, {
            placement: 'top',
            modifiers: [
                {
                    name: 'eventListeners',
                    options: {scroll: false}
                }
            ],
        });

【讨论】：