javascript - 如何根据窗口大小添加条件滚动？

Question

所以我正在开发一个 React 应用程序，我基本上想为较小的窗口大小(例如移动设备)包含一个滚动条。因此，当且仅当窗口大小小于菜单本身时，滚动条才会出现。

到目前为止，我所拥有的 hacky 修复。

    const styles = {

        dropdownContentClass: {
            maxHeight: "15 em",
            overflowY: "auto",
        }
    }

在这里，我在菜单上强制设置了最大高度，因此它始终可以滚动，但如果用户使用移动设备或窗口尺寸相对较小，我希望滚动可用。

编辑:

var mq = window.matchMedia("(max-width: 768px)")
    if (mq.matches){
        var mh = "15em"
        var oy = "scroll"
    }
    return {maxHeight: mh, overflowY: oy}

所以我得到了它来处理这种 hacky 修复。对 Javascript 来说仍然有点陌生，但是当有数百万种方法可以做某事时，很难确认您的代码。

Answer 1

如果内容超过窗口高度，浏览器默认会有滚动条，所以这应该已经可以了。如果您的容器具有固定高度来包裹您的页面，例如绝对定位的容器，您还需要向其添加 overflow-y: auto。