CODEWITHSUNDEEP
ioscssionic-framework
olivier
olivier

Reputation: 2645

Scrolling X not possible on iOS

When i load the screen on iOS scrolling in the X axis is not possible on iOS. No issues on android. When clicking a button which refreshes the data on the screen scrolling is possible again.

Anybody an idea what could cause this?

<div class="container">
    <!--  CONTENT -->
    <div class="scroll-container">
        <!-- CONTENT-->
    </div>
</div>

CSS

.container {
    overflow-y: scroll;
    width: 100%;
    position: absolute;
    overflow-x: scroll;
  }
  .scroll-container {
    min-width: 100%;
    overflow: scroll;
    overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
    display: inline-block;
    padding-bottom: 50px;
  }

Upvotes: 0

Views: 213

Answers (1)

sebaferreras
sebaferreras

Reputation: 44669

According to the docs you can add a scrolling section in your content using ion-scroll:

ion-scroll

Scroll is a non-flexboxed scroll area that can scroll horizontally or vertically. ion-scroll Can be used in places where you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller.

<ion-scroll scrollX="true" scrollY="true">
    <!-- ... --> 
</ion-scroll>

Demo source:

<ion-header>

  <ion-navbar>
    <ion-title>Scroll</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 100%">
    <div class="map-div"></div>
  </ion-scroll>

</ion-content>


<style>
  .map-div {
    width: 2600px;
    height: 1400px;
    background: url('./assets/map.jpeg') no-repeat;
  }
</style>

Upvotes: 1

Related Questions