Skip to content

Pointer Events

Murhaf Sousli edited this page Nov 20, 2019 · 10 revisions

In version 7, we introduced 2 ways of detecting pointer-events such as track clicked and thumb drag events.

<ng-scrollbar pointerEventsMethod="viewport || scrollbar">
  • pointerEventsMethod="viewport", will detect pointer events using viewport's mousemove, mousedown and mouseleave events.

  • pointerEventsMethod="scrollbar", will detect pointer events using scrollbar mousedown event.

In a nutshell, here are the pros and cons of each method:

Appearance ↓ viewport scrollbar
Standard
  • Only if both scrollbars appear, the content may overlap under the scrollbar
  • Scrolling over scrollbar works
  • The content never overlap under the scrollbars
  • Scrolling over scrollbar doesn't work
Compact
  • Content overlaps under the scrollbar as intended
  • Scrolling over scrollbar works
  • The content overlaps under the scrollbar as intended
  • Scrolling over scrollbar doesn't work

My recommendation: If scrolling over scrollbar isn't important to you, then go with pointerEventsMethod="scrollbar".