-
-
Notifications
You must be signed in to change notification settings - Fork 98
Pointer Events
Background: In version 4, we were using scrollbar's native element events for
click
,hover
anddrag
functions. we had one tiny issue that we were unable to scroll when the mouse is over the scrollbar because it is blocking the viewport.
Background: In version 5, we changed that and used the viewport events for
click
,hover
anddrag
functions
In version 7, we added 2 ways for detecting the pointer-events
<ng-scrollbar pointerEventsMethod="viewport || scrollbar">
-
pointerEventsMethod="viewport"
, will detect pointer events using viewport'smousemove
,mousedown
andmouseleave
events. -
pointerEventsMethod="scrollbar"
, will detect pointer events using scrollbarmousedown
,mouseenter
andmouseleave
event.
Appearance ↓ | viewport | scrollbar |
---|---|---|
Standard |
|
|
Compact |
|
|
My recommendation: If scrolling over scrollbar isn't important to you, then go with
pointerEventsMethod="scrollbar"
.
Theoretically scrollbar
method is more performant because viewport
method checks if the pointer is over the scrollbars while the pointer is moving over the viewport.
But most of the time, there won't be any difference in performance unless you have a complex design. try both and see what best fits your app.
The pointer-events are disabled on mobile browsers by design. because there is no pointer 😄
Become a sponsor and get your logo on our README on GitHub and the front page of https://ngx-scrollbar.netlify.com/.
Become a backer and get your logo on our README on GitHub.
Latest version (v15)
Addons:
Older version (v13)
- Demo for v13
- Usage
- Styling
- Global Options
- Pointer Events
- Scroll Event
- Updated Event
- Smooth Scroll Functions
- Performance tweak
- Integration
- Reached events