在javascript中滚动以在悬停时显示溢出元素

Question

在web应用程序中，我有一个带有工具提示的div，只有在将鼠标悬停在页面的特定对象上时才会显示。这些工具提示可能会从div溢出。当发生这种情况时，滚动条会按预期出现在页面上。问题是用户无法使用鼠标滚动，因为这样做会将鼠标移出悬停元素，因此工具提示会消失，并且窗口的大小会缩小到原始大小(因此滚动条也会消失)。

下面是一个类似行为的模拟示例：

​

我尝试使用scrollIntoView将对象放到视图中，但这仍然只工作了几秒钟，因为将元素放入视图的页面的自动滚动会将鼠标移出悬停的元素，并导致工具提示消失。

有没有办法始终保持最大的帧大小？这样，用户可以在将鼠标悬停在元素上之前滚动到右侧视图，以便完整地显示它们。

Answer 1

通过使用ResizeObserver使其正常工作。

我在web应用程序的源代码中定义了这个函数：

parent.set_size = function(height, width) {
    const iframe = document.getElementById('your-iframe');
    iframe.style.height = height + "px";
    iframe.style.width = width + "px";
}

然后在iframe中加载的页面中，我定义了类似以下内容：

$(document).ready(function() {
    // set the div which has a dynamic size depending on whether or not the tooltip are displayed
    var map_div = document.getElementById("map")
    // set the initial size
    parent.set_size(map_div.scrollHeight, map_div.scrollWidth);
    var max_height = map_div.scrollHeight;
    var max_width = map_div.scrollWidth;
    // when the size changes, keep the biggest size
    var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
            max_width = Math.max(entry.target.scrollWidth, max_width);
            max_height = Math.max(entry.target.scrollHeight, max_height);
            parent.set_size(max_height, max_width);
        }
    });
    ro.observe(map_div);
});

这样，iframe将始终保持最大尺寸，这样可以在显示工具提示之前滚动到正确的位置。