metafizzy / metafizzy/flickity
Enable scrolling via mousewheel
- Dominant language
- JavaScript
- Stars
- 7.6k
- Forks
- 593
- PR merge metrics
- No merged PRs in 30d
Description
I'm experiencing a little problem with one of my sliders.
``` javascript
// Defined in seperate JS file
function scrollEnd(flickelem) {
// FLICKITY DragEnd
if ( flickelem.options.freeScroll ) {
flickelem.isFreeScrolling = true;
}
// set selectedIndex based on where flick will end up
var index = flickelem.dragEndRestingSelect();
if ( flickelem.options.freeScroll && !flickelem.options.wrapAround ) {
// if free-scroll & not wrap around
// do not free-scroll if going outside of bounding cells
// so bounding cells can attract slider, and keep it in bounds
var restingX = flickelem.getRestingPosition();
flickelem.isFreeScrolling = -restingX > flickelem.cells[0].target &&
-restingX < flickelem.getLastCell().target;
} else if ( !flickelem.options.freeScroll && index == flickelem.selectedIndex ) {
// boost selection if selected index has not changed
index += flickelem.dragEndBoostSelect();
}
// apply selection
// TODO refactor this, selecting here feels weird
flickelem.select( index );
}
// Inside a tag inside the document
$(function(){
$(document).ready(function(e) {
var cellCount = $('.gallery-cell').length;
var canWrapAround = false;
if(cellCount > 1) canWrapAround = true;
$('.text-slider').flickity({
accessibility: true,
autoPlay: false,
cellAlign: 'center',
cellSelector: undefined,
contain: true,
draggable: true,
freeScroll: true,
friction: 0.2,
imagesLoaded: true,
initialIndex: 0,
percentPosition: true,
prevNextButtons: false,
pageDots: false,
resize: true,
rightToLeft: false,
watchCSS: false,
wrapAround: canWrapAround
}).mousewheel(function(e) {
e.preventDefault();
var flickelem = Flickity.data(this);
if (e.deltaX) {
flickelem.x += e.deltaX * e.deltaFactor;
}
else if (e.deltaY) {
flickelem.x += e.deltaY * e.deltaFactor;
}
scrollEnd(flickelem);
});
$(window).load(function(e) {
$('.text-slider').flickity('resize');
});
});
});
```
I am using the jQuery `mousewheel`plugin to support scrolling inside flickity. But somehow on mobile devices occasionally I can't reach the last cell. It always flicks back to the previous one. Could it be a bug or could it be a fault of me?
Contributor guide
Research direction
Start with the inline Flickity initialization and the scrollEnd function shown in the issue, then inspect how the mousewheel plugin updates Flickity on mobile devices. Reproduce navigation to the last cell and trace why it returns to the previous cell; done means the final cell remains reachable without breaking scrolling or wrapping behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jquery
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100