Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Apply passive:true to scroll/touch listeners deliberately, not by reflex
passive:true matters on scroll-blocking events (touchstart/touchmove/wheel) so the browser needn't wait for JS; on plain scroll listeners it's mostly intent, so use it knowingly.
Bad example
| 1 | // passive copied over without knowing what it does |
| 2 | window.addEventListener('wheel', onWheel); |
| 3 | element.addEventListener('touchmove', onMove); |
Explanation (EN)
On scroll-blocking events the browser must wait to see if the handler calls preventDefault, delaying scroll; omitting passive here forfeits a real responsiveness win.
Objašnjenje (HR)
Kod dogadaja koji mogu blokirati skrolanje preglednik mora cekati hoce li handler pozvati preventDefault, cime se odgada skrolanje; izostavljanje passive ovdje gubi stvarni dobitak u responzivnosti.
Good example
| 1 | // passive:true lets the browser scroll immediately for these events |
| 2 | window.addEventListener('wheel', onWheel, { passive: true }); |
| 3 | element.addEventListener('touchmove', onMove, { passive: true }); |
| 4 |
|
| 5 | // On plain scroll (fires after scrolling, no preventDefault) it's |
| 6 | // harmless and mainly documents intent. |
| 7 | window.addEventListener('scroll', onScroll, { passive: true }); |
Explanation (EN)
Knowing that passive:true unblocks scrolling on touch/wheel events lets you apply it where it actually improves responsiveness rather than as boilerplate.
Objašnjenje (HR)
Znajuci da passive:true otkljucava skrolanje kod touch/wheel dogadaja, primjenjujes ga ondje gdje stvarno poboljsava responzivnost, a ne kao boilerplate.
Exceptions / Tradeoffs (EN)
If a handler genuinely needs to call preventDefault (e.g. to block native scrolling), it must not be passive.
Iznimke / Tradeoffi (HR)
Ako handler stvarno treba pozvati preventDefault (npr. da blokira nativno skrolanje), ne smije biti passive.