scrollbar in canvas
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="scrollbar" id="ex3" width="100px" height="100px" overflow="auto" >
<canvas id="NodeList" style="border:2px solid black;" width="200" height="2000">
</canvas>
</div>
<script>
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.rect(20, 220, 150, 100);
ctx.rect(20, 420, 150, 100);
ctx.rect(20, 620, 150, 100);
ctx.rect(20, 820, 150, 100);
ctx.rect(20, 1020, 150, 100);
ctx.rect(20, 1220, 150, 100);
ctx.rect(20, 1420, 150, 100);
ctx.rect(20, 1620, 150, 100);
ctx.rect(20, 1820, 150, 100);
ctx.rect(20, 2020, 150, 100);
ctx.rect(20, 2220, 150, 100);
ctx.rect(20, 2420, 150, 100);
ctx.rect(20, 2620, 150, 100);
ctx.stroke();
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="scrollbar" id="ex3" width="100px" height="100px" overflow="auto" >
<canvas id="NodeList" style="border:2px solid black;" width="200" height="2000">
</canvas>
</div>
<script>
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.rect(20, 220, 150, 100);
ctx.rect(20, 420, 150, 100);
ctx.rect(20, 620, 150, 100);
ctx.rect(20, 820, 150, 100);
ctx.rect(20, 1020, 150, 100);
ctx.rect(20, 1220, 150, 100);
ctx.rect(20, 1420, 150, 100);
ctx.rect(20, 1620, 150, 100);
ctx.rect(20, 1820, 150, 100);
ctx.rect(20, 2020, 150, 100);
ctx.rect(20, 2220, 150, 100);
ctx.rect(20, 2420, 150, 100);
ctx.rect(20, 2620, 150, 100);
ctx.stroke();
</script>
</body>
</html>
en de css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
html, body {
height: 100%;
overflow: auto;
}
b {
margin-left: 75px;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:center;
}
a img {
border:none;
}
.scrollbar{
width:220px;
height:1000px;
background-color:B3B3B3;
overflow-y: auto;
overflow-x: hidden;
float:left;
// line-height: 0px;
}
#Display {
margin-left:250px;
}
#properties {
margin-left: 28px;
margin-top: 40px;
}
height: 100%;
overflow: auto;
}
b {
margin-left: 75px;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:center;
}
a img {
border:none;
}
.scrollbar{
width:220px;
height:1000px;
background-color:B3B3B3;
overflow-y: auto;
overflow-x: hidden;
float:left;
// line-height: 0px;
}
#Display {
margin-left:250px;
}
#properties {
margin-left: 28px;
margin-top: 40px;
}
weet iemand misschien hoe ik dit kan aanpakken ?
Dit lijkt me niet handig, ik zou het zo doen: Zie https://jsfiddle.net/1jk5enLq/
Dus zonder een hoogte op te geven.
en met de 2 de voorbeeld wat u laat zien zie ik nog steeds niet alle rectangles
wat ik nodig heb is meer scrolbar in een canvas hier is het in een div buiten canvas waardoor het niet de inhoud pakt maar de gegeven height en wil niet telkens de height veranderen als ik nieuwe rectangle toevoeg