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

Question

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

到目前为止，我有一个棘手的解决方案。

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。

Answer 2

您可以将所有内容打包到媒体查询中，该查询将从较小的设备(如手机(应用，最大宽度为您希望停止显示滚动条的最大宽度。

示例：

@media (max-width: 768px) {
dropdownContentClass: {
maxHeight: "15 em",
overflowY: "scroll",
}
}

这样，你的小变通方法只适用于最大768px的设备，在平板电脑或台式机上会停止