Changing active state on both click and scroll

327 views
Skip to first unread message

lindsayt...@gmail.com

unread,
Apr 23, 2017, 1:13:15 AM4/23/17
to Sly.js
I've setup a horizontal scrolling nav with Sly but have also combined it with some jQuery that sets the corresponding nav to active as the user scrolls through the page. However, on mobile, two nav items are showing the active CSS, though only one reflects the "active" class added.

The Issue:

1) Because Sly is set to change the active state on click, if someone is only scrolling through the page, they active state is changing because of my additional jQuery, but because Sly only recognizes active on click, the slider doesn't force center the active item when scrolled through.
2) Due to that issue, the user will have to scroll the nav sideways to see what the other nav items are and this will add an active state to the item clicked but if they continue to scroll, the next section visible will also get the active CSS (because of my added jQuery).

The Error: It's clearly just an issue on mobile because of the touch scrolling but these are the two errors I found when debugging on my phone:

"Unable to preventDefault inside passive event listener due to target being treated as passive."
"Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."

Here's a screenshot of those errors and an example of two nav items having "active" CSS (though only one will show the active class): https://i.stack.imgur.com/Ap4Da.png

What I'm trying to figure out:
1) is there a way to make the active state change on both click and scroll so that the active item will always be in the center of the slider and/or
2) if there is a way to allow both the jQuery functions that are changing the active state based on a click or scroll but make sure that the active CSS is removed if a new scroll or click happens? Like it does seem that both are working, however, they just seem to overlap when someone scrolls after clicking.

Any ideas or direction would help to figure this out! I've included a basic JSFiddle here (if you want to actually see the issue, check the link from a mobile device):
http://jsfiddle.net/linzerlion/nht02k5v/21/

Reply all
Reply to author
Forward
0 new messages