Половина контекстного меню внутри браузера

Question

Я создал собственное контекстное меню в HTML. Он отлично работает, но когда я открываю меню справа, половина его оказывается внутри. Есть ли способ проверить это, а затем добавить его в верхнюю часть позиции мыши?

Вот как это выглядит: https://media.discordapp.net/attachments/648794604132499459/707151713542602792/unknown.png https://media.discordapp.net/attachments/648794604132499459/707151701483978842/unknown.png

Вот мой код:

Javascript:

const cm = document.querySelector(".custom-cm");
function showContextMenu(show = true) {
   cm.style.display = show ? "block" : "none";
}
window.addEventListener("contextmenu", e => {
   e.preventDefault();
   showContextMenu();
   cm.style.top = e.y + "px" + cm.offsetHeight > window.innerHeight ? window.innerHeight - cm.offsetHeight : e.y + "px";
   cm.style.left = e.x + "px" + cm.offsetWidth > window.innerWidth ? window.innerWidth - cm.offsetWidth : e.x + "px";
});
window.addEventListener("click", () => {
   showContextMenu(false);
});

HTML:

<div class="custom-cm">
<div class="custom-cm__item" onclick="closeAndFocus()">Text eingeben</div>
<div class="custom-cm__item" onclick="copyText()">Text kopieren</div>
<div class="custom-cm__divider"></div>
<div class="custom-cm__item" onclick="helpMenu()">Hilfe</div>
<div id="SavePicLine" class="custom-cm__divider" style="display: none;"></div>
<div id="SavePic" class="custom-cm__item" onclick="downloadPic()" style="display: none;">Bild speichern</div>
<div class="custom-cm__divider"></div>
<div class="custom-cm__item" onclick="window.location.reload()">Aktualisieren</div>
<div class="custom-cm__item" onclick="showContextMenu(false);">Schließen</div>
</div>

CSS:

.custom-cm {
   background-color: #ffffff;
   border: 1px solid #cccccc;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   padding: 10px 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   display: none;
}

.custom-cm__item {
   cursor: pointer;
   padding: 8px 15px;
}

.custom-cm__item:hover {
   background-color: #f3f3f3;
}  

.custom-cm__divider {
   border-bottom: 1px solid #eeeeee;
   margin: 10px 0;
}

Здесь вы можете проверить это: https://codepen.io/IBimsEinDomi/pen/PoPEJER

Answer 1

Сработало:

function eventShowCM(e){
    e.preventDefault();
    showContextMenu();
    if(e.clientY + cm.offsetHeight < window.innerHeight) {
        cm.style.top = e.clientY + "px";
    }
    else {
        cm.style.top = (window.innerHeight - cm.offsetHeight) + "px";
    }
    if(e.clientX + cm.offsetWidth < window.innerWidth) {
        cm.style.left = e.clientX + "px";
    }
    else {
        cm.style.left = (window.innerWidth - cm.offsetWidth) + "px";
    }
}
window.addEventListener("contextmenu", eventShowCM);
window.addEventListener("click", function(){
    showContextMenu(false);
});