时间戳

首页 > 解决方案 > Js/React 调整容器大小超出屏幕边界

javascript - Js/React 调整容器大小超出屏幕边界

问题描述

我正在尝试构建一个允许在屏幕上调整大小区域的组件。我正在 React 中构建它，并且有一些库可以满足我的需求（React-Reflex是我正在尝试使用的库，但还有更多，例如React-Split-Pane或React-Splitter-Layout）。

只要您对屏幕尺寸感到满意，一切都很好。但是，我需要能够跨屏幕边界调整大小，因为在某些情况下（即移动屏幕）屏幕尺寸不够大，并且您希望将内容拉伸到其高度。

我已经实现了一种底部句柄，它允许我在屏幕尺寸上调整容器高度，但它工作得不是很流畅。它基本上跟随您的鼠标移动并根据行进的水平距离调整大小。但是，当您位于屏幕底部（手柄所在的位置）时会出现问题，因为您无法将鼠标移出屏幕。这留下了一个很小的距离来将容器扩展到底部（基本上是手柄的高度）。为了解决这个问题，我将屏幕底部的移动距离（距屏幕底部边缘最多 20 像素）乘以 5 以增加调整大小的边距。它使调整大小更有用，但仍远非完美。

只要用户一直向底部边缘拖动，我还尝试使用间隔来不断增加高度，但是 React 中的重绘周期效果不佳（可能是由于我的实施不佳）。

const [containerHeight, setCotainerHeight] = React.useState<number>();

const mouseDown = (e: MouseEvent) => {
    lastPosition = e.clientY;
};

const mouseMove = (e: MouseEvent) => {

    if (lastPosition) {
        const diff = e.clientY - lastPosition;
        lastPosition = e.clientY;

        // If dragging down and mouse is closer than 20px to the bottom end, multiply by 5 to speed up resizing
        if (diff > 0 && (e.clientY + 20 >= window.innerHeight)) {
            setContainerHeight(containerHeight + diff * 5);
        }
        else {
            setContainerHeight(containerHeight + diff);
        }
    }
};

const mouseUp = (e: MouseEvent) => {
    lastPosition = null;
}

// Mouse down is registered on the element
window.onmousemove = mouseMove;
window.onmouseup = mouseUp;

到目前为止，我有这个，很想听听一些想法，因为我找不到任何令人满意的解决方案。

标签： javascriptreactjs

解决方案

推荐阅读