是否有可能防止网格项目被创建超出固定画布?

Question

我遵循这个指南来创建和删除网格项。然而，是否有可能防止它创建超出固定画布大小?

例如，我的画布高度是300px，所以当我点击add item按钮时，不会创建任何元素。

这是我当前的函数，检查所需的高度

warningMessage = () => {
var chart = document.getElementsByClassName("graph");
var largestYvalue = "";
for (var i = 0; i < chart.length - 1; i++) {
var firstElement = parseInt(
chart[i].style.transform.replace(/[()]/g, "").split(",")[1]
);
var EachElement = parseInt(
chart[i + 1].style.transform.replace(/[()]/g, "").split(",")[1]
);
if (EachElement > firstElement) {
largestYvalue = EachElement;
}
}
if (largestYvalue >= 300) {
alert("it is going beyond the canvas");
}
};

画布是在my styles.css中定义的

.DetailLocationContainer {
background-color: red;
width: 100px;
height: 300px;
/* margin: 2% auto auto auto; */
background-image: repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
background-size: 50px 50px;
}

网格项将在警报之后创建，但我想做的是，在没有创建网格项的情况下有警报

这是我的codesandbox

Answer 1

如果我没理解错的话我马上想到的一种方法就是JS

if(window.innerHeight < the_desired_height)

肯定不是最有效的，但它可以工作，它可以固定高度或动态