| P
..
.. .. .. .. ..
.. .. .. .. ..
.. .. .. .. ..
.. .. .. .. ..
.. .. .. 350 |
Q
..
.. .. .. .. ..
.. .. .. .. ..
.. .. .. 145 |
Scrollbar.html
Bestand
beste chatGPT kun je mij uitleggen waarom in deze applicatie de eerste scrollbar niet van 0 tot/met 100 kan laten lopen? En de tweede scrollbar niet van -10 t/m +10?
De reden ligt in hoe een browser scrollbars berekent. In jouw code is de scrollbar niet gekoppeld aan getallen zoals 0-100 of −10..+10, maar aan pixels van de inhoud die buiten het zicht valt.
Ik leg het stap voor stap uit aan de hand van je bestand.
1. Waar de scrollbarwaarde vandaan komt
De waarde die je toont is:
container3.scrollTop
Dat betekent:
scrollTop = aantal pixels dat de inhoud omhoog is geschoven.
Dus de scrollbar werkt met:
0 → bovenkant
max → totale scrollbare hoogte in pixels
Die maximale waarde is:
scrollHeight - clientHeight
2. Waarom jouw eerste scrollbar niet 0-100 is
De container is:
#scrollContainer3 {
height: 200px;
padding: 10px;
}
Scrollbar
Maar de inhoud bestaat uit meerdere blokken:
.content-block {
height: 100px;
margin-bottom: 10px;
}
Scrollbar
En je hebt 5 blokken.
Dus ongeveer:
blokhoogte 100
margin 10
per blok ≈110 px
Voor 5 blokken:
5 110 ≈ 550 px
De container toont maar ongeveer:
200 px
Dus de maximale scroll wordt ongeveer:
550 - 200 ≈ 350 px
Daarom zie je waarden zoals:
0 ... 350
en niet 0-100.
3. Waarom de tweede scrollbar geen −10 tot +10 kan zijn
Browsers laten scrollTop nooit negatief worden.
Dit kan alleen:
scrollTop ≥ 0
Dus:
0 → boven
max → onder
Een negatieve waarde bestaat simpelweg niet in het scrollmodel.
Daarom kun je niet krijgen:
-10 ... +10
4. Als je WEL 0-100 wilt
Dan moet je de pixelwaarde omrekenen naar een schaal.
Bijvoorbeeld:
let maxScroll = container3.scrollHeight -
container3.clientHeight;
let percentage = (container3.scrollTop / maxScroll) * 100;
form["veld3"].value = percentage.toFixed(1);
Dan krijg je:
0 → boven
100 → onder
ongeacht de echte pixelhoogte.
5. Als je −10 tot +10 wilt
Dan kun je dezelfde techniek gebruiken:
let maxScroll = container4.scrollHeight -
container4.clientHeight;
let value = (container4.scrollTop / maxScroll) * 20 - 10;
form["veld4"].value = value.toFixed(1);
Resultaat:
boven → -10
midden → 0
onder → +10
6. Kleine tip voor je code
Deze regel:
const status3 = document.getElementById('status3');
en
const status4 = document.getElementById('status4');
hebben geen element in de HTML, dus die variabelen worden nooit gebruikt.
✅ Kort samengevat
Je scrollbar werkt met pixels van verborgen content, niet met jouw gewenste schaal.
Dus:
scrollTop = pixels
Wil je een schaal zoals:
0-100
-10..+10
dan moet je de pixelwaarde omrekenen.
💡 Als je wilt kan ik ook een verbeterde versie van je hele HTML maken (korter + nauwkeuriger) waarin de scrollbar direct 0-100 en −10..+10 toont. Dat scheelt later veel rekenwerk.
Bronnen