現在、信号ログを表示できるものを製作しています。

緑色の十字バーを表示して画面横いっぱいに要素サイズを変更しようとしています。

width:100%;とした時、スクロールバーをまたいでしまって見た目がよろしくないので、

ググり、
document.body.clientWidth
と
window.innerWidth
の差を求めればスクロールバーの幅が取得できると知りました。

しかし今回のケースではページ全体がスクロールされるのではなくて、一部だけがスクロールされます。

試してみたのですがchromeの拡大率が100%の時に一見うまくいったように見えたのですが
拡大、縮小するとズレが発生してしまいます。

このような場合どのように記述すれば目的が達成できるのでしょうか。

ご回答よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title></title>
6  <link rel="stylesheet" href="styles.css">
7</head>
8<body>
9
10
11    <div id="container">
12
13      <div id="Vscrolls">
14        <div id="ALWL">
15
16          <div class="row">
17            <div class="Address">Address</div>
18            <div class="Comment">Comment</div>
19          </div>
20
21          <div class="row">
22            <div class="Address">Address</div>
23            <div class="Comment">Comment</div>
24          </div>
25
26          <div class="row">
27            <div class="Address">Address</div>
28            <div class="Comment">Comment</div>
29          </div>
30
31          <div class="row">
32            <div class="Address">Address</div>
33            <div class="Comment">Comment</div>
34          </div>
35
36          <div class="row">
37            <div class="Address">Address</div>
38            <div class="Comment">Comment</div>
39          </div>
40
41          <div class="row">
42            <div class="Address">Address</div>
43            <div class="Comment">Comment</div>
44          </div>
45
46        </div>
47      </div>
48
49      <div id="Hscrolls">
50        <div id="selectBarV"></div>
51        <div id="selectBarH"></div>
52
53
54
55          <div id="contents">
56              <div class="bitdata">
57                  <div class ="rise">1</div>
58                  <div class ="extnc">0</div>
59                  <div class ="extnc">0</div>
60                  <div class ="extnc">0</div>
61
62              </div>
63              <div class="bitdata">
64                  <div class ="rise">1</div>
65                  <div class ="rise">1</div>
66                  <div class ="rise">1</div>
67                  <div class ="extnc">0</div>
68
69              </div>
70              <div class="bitdata">
71                  <div class ="rise">1</div>
72                  <div class ="extnc">0</div>
73                  <div class ="rise">1</div>
74                  <div class ="extnc">0</div>
75                  <div class ="extnc">0</div>
76
77              </div>
78              <div class="bitdata">
79                  <div class ="rise">1</div>
80                  <div class ="extnc">0</div>
81                  <div class ="rise">1</div>
82                  <div class ="extnc">0</div>
83
84              </div>
85              <div class="bitdata">
86
87                  <div class ="rise">1</div>
88                  <div class ="extnc">0</div>
89                  <div class ="extnc">0</div>
90                  <div class ="rise">1</div>
91                  <div class ="extnc">0</div>
92                  <div class ="extnc">0</div>
93                  <div class ="extnc">0</div>
94                  <div class ="rise">1</div>
95                  <div class ="extnc">0</div>
96                  <div class ="rise">1</div>
97                  <div class ="rise">1</div>
98                  <div class ="rise">1</div>
99                  <div class ="rise">1</div>
100                  <div class ="extnc">0</div>
101                  <div class ="extnc">0</div>
102                  <div class ="extnc">0</div>
103                  <div class ="rise">1</div>
104                  <div class ="extnc">0</div>
105                  <div class ="rise">1</div>
106                  <div class ="rise">1</div>
107                  <div class ="rise">1</div>
108              </div>
109              <div class="bitdata">
110                  <div class ="extnc">0</div>
111                  <div class ="extnc">0</div>
112                  <div class ="extnc">0</div>
113                  <div class ="extnc">0</div>
114                  <div class ="extnc">0</div>
115                  <div class ="extnc">0</div>
116                  <div class ="extnc">0</div>
117                  <div class ="extnc">0</div>
118                  <div class ="extnc">0</div>
119                  <div class ="extnc">0</div>
120                  <div class ="extnc">0</div>
121                  <div class ="extnc">0</div>
122                  <div class ="extnc">0</div>
123                  <div class ="extnc">0</div>
124                  <div class ="extnc">0</div>
125                  <div class ="extnc">0</div>
126                  <div class ="extnc">0</div>
127                  <div class ="extnc">0</div>
128                  <div class ="extnc">0</div>
129                  <div class ="extnc">0</div>
130                  <div class ="extnc">0</div>
131              </div>
132          </div>
133
134
135      </div>
136
137
138
139    </div>
140
141      <div id="footer">
142
143        <div id="ZoomBox">
144          <div id="btnZI" class="disabled">btnZI</div>
145          <div id="btnZO" class="disabled">btnZO</div>
146          <div id="magnification">倍率:</div>
147        </div>
148
149        <input type="text" id="memo" placeholder="メモ">
150<div id="testdiv"></div>
151
152
153
154      </div>
155
156<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
157      <script src="main.js"></script>
158</body>
159</html>
160

css
1body {
2  background: #222;
3  font-family: ;Arial, sans-serif;
4  font-size: 15px;
5}
6
7#container{
8  width: 100%;
9  background-color: #ddd ;
10  position: absolute;top:0;left: 0;
11}
12
13#Vscrolls {
14    float: left;
15    width: 190px;
16    position: sticky;  left: 0;
17}
18
19#ALWL{
20  background-color: #bbb;
21  box-shadow: 8px 0px 8px rgba(0,0,0,0.2);
22  height: 300px;
23}
24
25#Hscrolls {
26      background-color: pink;
27      overflow: scroll;
28}
29
30
31#contents{
32  width: 2300px;
33  height: 300px;
34  background-color: #888;
35}
36
37
38#selectBarH{
39  clear: both;
40  opacity: 0.4;
41  position: absolute;top:18px;left: 0px;
42  width: 500px ;
43  height: 13px;
44  background-color: #3f3;
45  overflow: hidden;
46
47}
48
49#selectBarV{
50  overflow: hidden;
51  opacity: 0.2;
52  position: absolute;top:0;left:260px;
53  width: 13px;
54  height: 100%;
55  background-color: #3f3;
56}
57
58
59
60#btnZI,#btnZO,#memo {margin: 4px;}
61
62#memo {width: 400px;}
63
64.Address{
65  float: left;
66  margin: 1px;
67  padding: 0px 2px 0px;
68  background-color: #fff;
69  border-radius: 4px;
70  color: #000;
71}
72.Comment{
73  width: 90px;
74    float: left;
75    margin: 1px;
76    padding: 0px 2px 0px;
77    background-color: #fff;
78    border-radius: 4px;
79    color: #000;
80  }
81
82.row{clear: both;}
83
84.bitdata{display: table;}
85
86.rise,.extnc{
87  font-size: 5px;
88  display: table-cell;
89  width: 10px;
90  height: 16px;
91  text-align: center;
92  vertical-align: middle;
93}
94
95.rise{
96  background-color: #333;
97  color: #555;
98}
99
100.extnc{
101  background-color: #eee;
102  color: #aaa;
103}
104
105

js
1  (function() {
2    'use strict';
3
4    var selectBarH = document.getElementById("selectBarH");
5    var selectBarV = document.getElementById("selectBarV");
6
7    var HscrollsX = document.getElementById("Hscrolls");
8    var rectHx =  HscrollsX.getBoundingClientRect();
9    var docliw = document.body.clientWidth;
10    var winwi = window.innerWidth;
11
12    var diffx;
13    var widH;
14
15    var Address = document.querySelector('.Address');
16    var AddressHeightpx = getStyleSheetValue(Address, 'height');
17    var AddressMarginpx = getStyleSheetValue(Address, 'Margin');
18    var AddressHeightNum = parseFloat(AddressHeightpx.slice(0,-2));
19    var AddressMarginNum = parseFloat(AddressMarginpx.slice(0,-2));
20    var AddressTotalHeight = AddressHeightNum + (2 * AddressMarginNum);
21    $('.rise').css('height',AddressTotalHeight);
22
23
24
25
26    var rise = document.querySelector('.rise');
27    var risewidthpx = getStyleSheetValue(rise, 'width');
28    var riseheightpx = getStyleSheetValue(rise, 'height');
29
30    var risewidthnum = risewidthpx.slice(0,-2);
31    var riseheightnum = riseheightpx.slice(0,-2);
32
33
34
35    function getStyleSheetValue(element, property) {
36      if (!element || !property) {
37        return null;
38      }
39      var style = window.getComputedStyle(element);
40      var value = style.getPropertyValue(property);
41      return value;
42    }
43
44
45
46
47
48
49
50
51    var selectBarH = document.getElementById("selectBarH");
52    var rectH =  selectBarH.getBoundingClientRect();
53
54    var selectBarV = document.getElementById("selectBarV");
55    var rectV =  selectBarV.getBoundingClientRect();
56
57    var itvY = riseheightnum;
58    var itvX = risewidthnum;
59
60    var  mousePositionX;
61    var  mousePositionY;
62
63
64  document.getElementById('Hscrolls').addEventListener('mousemove',function(e){
65     getMousePosition(e);
66  });
67
68
69  function getMousePosition(e){
70    try{
71    mousePositionX = Math.floor(e.clientX/risewidthnum) * risewidthnum;
72    mousePositionY = Math.floor(e.clientY/riseheightnum) * riseheightnum;
73
74    selectBarV.style.left = mousePositionX + "px";
75    selectBarH.style.top = mousePositionY + "px";
76    selectBarV.style.width = risewidthpx;
77    selectBarH.style.height = riseheightpx;
78
79    docliw = document.body.clientWidth;
80    winwi = window.innerWidth;
81    diffx = winwi - docliw;
82
83    selectBarH.style.width = parseInt(winwi-diffx) + "px";
84  }catch (error){
85  console.log(error);
86}}
87
88  })();
89

m.ts10806

2018/04/30 21:46

外部サービスを利用してコードを提示する場合、外部サービスが何かで見れなくなることもあるので、質問本文にも追記してください。（あとリンクにしてもらえると回答者が確認しやすくなります）

gamu

2018/04/30 22:36

申し訳ございません。文字数が多すぎたので外部サービスに頼ってしまいました。ご指摘いただいた後、ダイエット版を掲載しました。以後気を付けます。

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

回答1件

ベストアンサー

現状の方法では困難

スクロールバーの値を取得するまでは思惑通りかと思います。
ですが、縮小拡大に対し、スクロールバーの幅は変化してくれません。
よって、

javascript
1selectBarH.style.width = (winwi-(diffx / 「ブラウザの拡大率」) + "px";

という計算が必要になってくるのですが、検索してみても、現状「ブラウザの拡大率」の取得に成功された方が見当たりません。

なので、別の方針の検討が必要かと思います。
思いつく案は下記です。

提案1) absoluteのdivを縦横に用いるのではなく、テーブルのセル（実際にはdivのようですが）のbackgournd-colorを動的に変えていく

jqueryだとかなり動作が遅くなる恐れがあります。vueのほうが幾分早いかと。

提案2) 縦横100%で指定しスクロールバーの重複やむなしとする。ただし、スクロールバーへの重複の見た目が悪く無い様、1pxの線のみ表示、セルの下と右に線が来るようにする。（または上下左右２重線）

・左と右

CSS
1#selectBarH{ border-top: solid 1px #3f3; }
2#selectBarV{ border-right: solid 1px #3f3; }
3

・上下左右２重線

CSS
1#selectBarH{ border-top: solid 1px #3f3; border-bottom: solid 1px #3f3; }
2#selectBarV{ border-right: solid 1px #3f3; border-left: solid 1px #3f3;}
3