ionic-framework: ion-scroll horizontal scroll not working on Android & Browser

Ionic version: (check one with “x”) [ ] 1.x [X] 2.x

I’m submitting a … (check one with “x”) [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: I have the following code in my app:

<ion-scroll scrollX="true" id="lines">
        <div class="line" *ngFor="let line of lines" (tap)="selectLine(line)">{{ line }}</div>
</ion-scroll>

It should allow to scroll horizontally but it’s not working on Android. With iOS everything goes fine.

It generates the following HTML: touch-action: pan-y;

<div class="line" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 10</div>

Expected behavior: It should generate: touch-action: pan-x;

<div class="line" style="touch-action: pan-x; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 10</div>

Ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v5.8.0
Xcode version: Xcode 8.2 Build version 8C38

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17 (2 by maintainers)

Most upvoted comments

Still an issue in Ionic 3.92 on Android devices. Inspired by https://github.com/hammerjs/hammer.js/issues/1050#issuecomment-269492755 I needed x-y pan and this SCSS worked for me:

    .scroll-content {
        touch-action: pan-x pan-y !important;
        * {
            touch-action: pan-x pan-y !important;
        }
    }

saschwarz on Mar 3, 2018

Still having this problem for me in the browser with 2.0.

Edit: Realized it works with a two finger scroll on my track pad, but not with a click and drag or a scroll using my usb mouse.

JWesorick on Mar 6, 2017

Hi, did anyone get this fixed?

gongalt on Feb 20, 2017