scrollとかでdocument.bodyのwidthサイズが変わると、それに従って中にあるdivのサイズもレスポンシブに縮小するようにしたいです。
現在はキャプチャーのようになってます。
これを実現するにあたって以下の質問があります。
- 実現するにはResizeObserverを使うしかない?
ResizeObserverのWebApiでdocument.bodyを検知してwidthサイズが変わるたびに中のdivサイズも変更すると実現できそうですが、これ以外によい方法がないかアドバイスいただきたいです。
- 1番の方法で実装するためには
1番の方法で実装するためには、変更前のdocument.body.width / 中のdiv.width
の結果を保存しておいて(hoge変数に保存したとして)
変更後の document.body.width
と掛け算(document.body.widt x hoge)する方法でしょうか?
それ以外の方法がありましたらアドバイスいただきたいです。
自分のコードは以下の貼っておきます。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <!-- --> 5 <style type="text/css"> 6 * { 7 margin: 0; 8 padding: 0; 9 box-sizing: border-box; 10 } 11 12 body { 13 width: 100vw; 14 height: 100vh; 15 display: flex; 16 justify-content: center; 17 align-items: center; 18 } 19 20 .parent { 21 width: 676px; 22 height: 380px; 23 } 24 .area { 25 width: auto; 26 height: 100%; 27 background-color: rgba(0, 0, 0, 0.2); 28 overflow: hidden; 29 position: relative; 30 } 31 32 .area__box { 33 position: absolute; 34 width: 200px; 35 height: 124px; 36 background-color: red; 37 cursor: move; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="parent"> 43 <div class="area"> 44 <div class="area__box"></div> 45 </div> 46 </div> 47 48 <script type="text/javascript"> 49 let containerGlobalWidth; 50 let containerGlobalHeight; 51 let containerGlobalLeft; 52 let containerGlobalTop; 53 let containerGlobalRight; 54 let containerGlobalBottom; 55 56 let boxGlobalLeft; 57 let boxGlobalTop; 58 let boxGlobalRight; 59 let boxGlobalBottom; 60 const container = document.querySelector(".area"); 61 const box = container.querySelector(".area__box"); 62 63 const resizeObserver = new ResizeObserver(entries => { 64 const { 65 left: containerLeft2, 66 top: containerTop2, 67 right: containerRight2, 68 bottom: containerBottom2 69 } = container.getBoundingClientRect(); 70 71 const { 72 left: boxLeft2, 73 top: boxTop2, 74 right: boxRight2, 75 bottom: boxBottom2 76 } = box.getBoundingClientRect(); 77 78 containerGlobalLeft = containerLeft2; 79 containerGlobalTop = containerTop2; 80 containerGlobalRight = containerRight2; 81 containerGlobalBottom = containerBottom2; 82 83 boxGlobalLeft = boxLeft2; 84 boxGlobalTop = boxTop2; 85 boxGlobalRight = boxRight2; 86 boxGlobalBottom = boxBottom2; 87 }); 88 89 resizeObserver.observe(document.body); 90 91 const { 92 width: containerWidth, 93 height: containerHeight, 94 left: containerLeft, 95 top: containerTop, 96 right: containerRight, 97 bottom: containerBottom 98 } = container.getBoundingClientRect(); 99 containerGlobalWidth = containerWidth; 100 containerGlobalHeight = containerHeight; 101 containerGlobalLeft = containerLeft; 102 containerGlobalTop = containerTop; 103 containerGlobalRight = containerRight; 104 containerGlobalBottom = containerBottom; 105 106 const { 107 width: boxWidth, 108 height: boxHeight 109 } = box.getBoundingClientRect(); 110 111 let isDragging = null; 112 let originLeft = null; 113 let originTop = null; 114 let originX = null; 115 let originY = null; 116 box.addEventListener("mousedown", e => { 117 isDragging = true; 118 originX = e.clientX; 119 originY = e.clientY; 120 originLeft = box.offsetLeft; 121 originTop = box.offsetTop; 122 }); 123 124 document.addEventListener("mouseup", e => { 125 isDragging = false; 126 }); 127 128 document.addEventListener("mousemove", e => { 129 if (isDragging) { 130 const diffX = e.clientX - originX; 131 const diffY = e.clientY - originY; 132 133 const endOfXPoint = containerGlobalWidth - boxWidth; //★★ 134 const endOfYPoint = containerGlobalHeight - boxHeight; //★★ 135 136 const leftMax = Math.max(0, originLeft + diffX); 137 const leftMin = Math.min(leftMax, endOfXPoint); 138 const leftWithPx = `${leftMin}px`; 139 140 const topMax = Math.max(0, originTop + diffY); 141 const topMin = Math.min(topMax, endOfYPoint); 142 const topWithPx = `${topMin}px`; 143 144 box.style.left = leftWithPx; 145 box.style.top = topWithPx; 146 } 147 }); 148 </script> 149 </body> 150</html>
検索できるキーワードでも教えていただければ、幸いです。
よろしくおねがいします。