Materialize: Carousel prevent the scroll up and scroll down of the containing page.
Description
The swipe up or swipe down events within the carousel are not propagating.
Carousel should handle only swipe left and swipe right events and don't impact to the the vertical scrolling of the containing page.
Repro Steps
Open the documentation for th carousel component with a mobile device and try to scroll down or up the page starting the scroll from the carousel component.
gianpolo
All 17 comments
We have to filter the swipe up and swipe down events of Hammer.js, I will prepare a PR for this.
Duplicate of https://github.com/Dogfalo/materialize/issues/3881
DanielRuf
on 29 Mar 2017
I think that we can't prevent the page scrolling when using the carousel from touch devices.
This is annoying when the carousel content fit the height of the device screen
gianpolo
on 30 Mar 2017
The carousel currently does this, but the threshold for the horizontal movement is pretty low, so a downward angled swipe will often be misinterpreted as horizontal movement
acburst
on 7 Apr 2017
Great , why don't we increase the threshold providing an option ?
gianpolo
on 7 Apr 2017
The handling of the touchstart event seems to prevent vertical scrolling.
```javascript
function tap(e) {
e.preventDefault();
...
}
````
Why do we want to prevent default behaviour for this event? Any chance we can remove this line?
winterda
on 11 Apr 2017
I agree with @winterda, I changed it to
if (e.type === 'mousedown') {
e.preventDefault();
}
to restore the vertical scroll behaviour on mobile devices but leave it as is on desktop devices.
redboul
on 5 May 2017
where did you insert that code? @redboul
jamesjsewell
on 6 May 2017
@jamesjsewell I guess in the tap method.
This but just a better approach.
DanielRuf
on 6 May 2017
I am using the change proposed by @redboul in production code without issues. I have created a PR #4702.
aschoenebeck
on 17 May 2017
@redboul works like a charm! Thank you!
vitalishapovalov
on 29 May 2017
PR #4702 was merged so that @redboul 's solution is now in master and will be included in the next release.
I suppose this issue can be closed now.
aschoenebeck
on 2 Jun 2017
This does restore vertical scrolling on mobile... but breaks horizontal carousel touch scrolling. It's arguably worse 馃槩
Tested with on 0.100.2, was previously on 0.98.2 with the original bug.
doublejosh
on 3 Oct 2017
Should I open a new issue for touch scroll navigation being broken (which seems pretty major) or should we reopen this one?
doublejosh
on 3 Oct 2017
Can you show us (in a codepen) that it is still broken? Then I would reopen this one :-)
tomscholz
on 3 Oct 2017
I just tested all the versions between 0.98.2 and 0.100.2 ...it was indeed fixed in 0.99.0 (both vertical and horizontal touch scrolling were working). Then the larger break happened in 0.100.0.
doublejosh
on 3 Oct 2017
doublejosh
on 3 Oct 2017
I agree with @winterda, I changed it to
if (e.type === 'mousedown') { e.preventDefault(); }to restore the vertical scroll behaviour on mobile devices but leave it as is on desktop devices.
Well done, that should do the work for you, it worked well for me.
just copy this above the carousel initial function to override the tap function.
yotamdahan1
on 12 Apr 2020
Related issues
onigetoc
路
3Comments
locomain
路
3Comments
artur99
路
3Comments
bradley-varol
路
3Comments
heshamelmasry77
路
3Comments
Most helpful comment
The handling of the touchstart event seems to prevent vertical scrolling.
```javascript
function tap(e) {
e.preventDefault();
...
}
````
Why do we want to prevent default behaviour for this event? Any chance we can remove this line?