My Works & learnings

ClientWidth OffsetWidth ScrollWidth, Usability and a11y

December 17, 2019

ClientWidth

ClientWidth is the width of the DOM excluding the scrollbar includes padding.

Offset Width

Offset width is the width of the DOM including scroll bar, padding and border and nargins.

If the scroll bar is not present OffsetWidth will be equal to ClientWidth.

ScrollWidth

ScrollWidth is the width of the domNode eve the scrollbar is not present.

Code to Detect whether hover to scrollbar

function isHoverOnScrollbar(e){
    return e.target.clientWidth <= e.offsetX || e.target.clientHeight<= e.offsetX;
}

https://codepen.io/rohinikumar4073/pen/XWJNMLr

A11y

A11y and Usability are different things. Usability in simple terms how the system can be really usable to people. A11y on other hand is the system accesible for different people. This gives a different perspective of UX.


Vishnu Sandhireddy

Written by Vishnu Sandhireddy who lives and works in Hyderabad, India. twitter