metafizzy / metafizzy/flickity

Enable scrolling via mousewheel

Open
#44 46 comments 49 reactions 0 assignees View on GitHub
feature request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.