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}

所以我让它完成了这种黑客修复。对于 Javascript 来说还是比较陌生，但是当有数百万种方法来做某事时，很难确认你的代码。

Answer 1

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