bodyのwidthサイズ変更されたら中のdivのwidthサイズも変更したい

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>

検索できるキーワードでも教えていただければ、幸いです。
よろしくおねがいします。

Lhankor_Mhy

2021/07/05 06:59

body { width: 100vw; } なのですから、中の div も vw で指定すればいいのではないかな、と思うのですが、何か意図がありますか？

Kimsehwa

2021/07/05 08:08

コメントありがとうございます。下に２つのdomがありますが、両方ともvwをつければ？ということでしょうか？ div.areaに関しては flex centerを使いたかったことと div.area下にあるdivはx,y座標が外れてしまったので使えませんでした。

Lhankor_Mhy

2021/07/05 09:12 編集

ちょっと、ご質問の意味が分からなくなりました。「中にあるdiv」とは .parent のことではないのですね？

行動規範の内容に同意します

回答1件

すみません、質問が読み取れていないかもしれないですが、以下のようにすればいいのではないかな、と思いました。

css
1        .parent {
2            /*width: 676px;*/
3            width: 50vw;
4            height: 380px;
5        }

投稿2021/07/05 09:34

Lhankor_Mhy

総合スコア36158

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

bodyのwidthサイズ変更されたら中のdivのwidthサイズも変更したい

関連した質問