<button id="close-button" class="close-button" po 4 <p id="popover-content"> サンプル1</p> 5 </div> 10 cursor: col-resize; 1 .resizer { 2 position: absolute; 3 left: 0px; 4 width: 0px; 5 flex-grow: 0; 6 z-index: 109; 7 top: -1px; 8 bottom: -1px; 9 pointer-events: auto; 11 height: 100%; 12 width: 12px; 13 margin-left: -6px; 14 } 1 const resizer = document.querySelector(".resizer"); 2 const popover = document.querySelector("#popover"); 3 let mouseDown = false; 4 let startX, startWidth; 5 6 resizer.addEventListener("mousedown", (e) => { 7 mouseDown = true; 8 startX = e.clientX; 9 startWidth = parseInt(document.defaultView.getCom 10 }); 11 document.addEventListener("mousemove", (e) => { 12 if (!mouseDown) return; 13 const minWidth = 200; 14 const dx = e.clientX - startX; 15 const newWidth = startWidth - dx; 16 const maxWidth = document.documentElement.clientW 17 if (newWidth > minWidth && newWidth < maxWidth) { 18 popover.style.width = startWidth - dx + "px"; 19 popover.style.left = e.clientX + "px"; 20 } 21 }); 22 document.addEventListener("mouseup", () => { mouseD