Why I can't scroll my app in IONIC

Question

I created little app in IONIC framework, i have 3 tabs, i created to sliding tabs left and right. But my problem is i cant scroll my card in first tab.

CODE:

I tried to change this ion content scroll from false to true, but when i do this when I scrolling also tab bar moving with my text content.

<ion-content scroll="false" class="has-subheader">

    <ion-slide-box show-pager="false" ion-slide-tabs>
        <ion-slide ion-slide-tab-label="TOP">
            <div class="list card ">

  <div class="item item-avatar">
    <img src="img/pic1.jpg">
    <h2>Author name</h2>
  </div>

  <div class="item item-body">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum, elit non scelerisque tincidunt, magna ligula elementum lectus, eget tempor dolor nisl at mauris. Curabitur eget ultrices ligula.
    </p>
    <img class="full-image" src="img/pic2.jpg">
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      Like
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      Share
    </a>
  </div>

Answer 1

you need to add either ion-content or ion-scroll after ion-slide. basically ion-slide-box is container to swipe between pages(ion-slide). ion-slide represent individual pages and each of it should have ion-content, ion-item, ion-scroll. Either of these should work

 <ion-slide-box>
           <ion-slide> <!--page1-->
            <ion-content>
              <div class="list card ">
                <div class="item item-avatar">
                  <img src="img/pic1.jpg">
                  <h2>Author name</h2>
                </div>
              </div>
            </ion-content>
           </ion-slide>
         <ion-slide> <!--page2-->
            <ion-content>
              <div class="list card ">
                <div class="item item-avatar">
                  <img src="img/pic1.jpg">
                  <h2>Author name</h2>
                </div>
              </div>
            </ion-content>
           </ion-slide>
</ion-slide-box>

Answer 2

Have your content inside your slide and your tabs outside of the content so they wont scroll. I have included a example from a project i made. Whatever you want to scroll have inside the content. if you dont want it to scroll put it outside the content. let me know if you have any questions.

<ion-slide>
            <div ng-if="uploadList" class="bar bar-header bar-positive">
                <button ng-click="GoBack()" class="button button-clear button-light icon-left ion-chevron-left">Go Back</button>
            </div>
            <div ng-if="uploadList == false" class="bar bar-header bar-positive">
                <button ng-click="Cancel()" class="button button-clear button-light icon-left ion-chevron-left">Cancel</button>
            </div>
            <ion-content class="has-header has-footer">
                <div ng-if="showuploads && uploadList" ng-repeat="item in uploads" class="list card">
                    <div style="background-color:#284f9a !important; color: white !important; font-size: 24px;" class="item">
                        <i class="icon icon-left ion-checkmark-circled" style="color:green"></i>
                        {{item.DocTypeName}}
                    </div>
                    <div class="item">
                        Order: {{item.Value}}
                    </div>
                    <div class="item">
                        Driver ID: {{item.UploadUser}}
                    </div>
                    <div class="item">
                        Upload Date: {{item.UploadDate}}-{{item.UploadTime}}
                    </div>
                    <div class="item item-image">
                        <img src="{{item.Image}}" />
                    </div>
                </div>
                <div ng-if="!showuploads && uploadList" class="list card">
                    <div style="background-color:#284f9a !important; color: white !important; font-size: 24px;" class="item">
                        No Previous Uploads
                    </div>
                    <div class="item item-text-wrap center">
                        <span ng-if="!showuploads">Click the take photo button below to capture your document. After you take the picture, select the document type from the shown list. Then hit the upload document button to submit your document. At any point you can retake the photo or change the document type using the take photo button, or the doc type button.</span>
                    </div>
                </div>
                <div ng-if="uploadList == false" class="list card">
                    <div class="item item-image">
                        <img class="podImg" src="{{image}}" />
                    </div>
                    <div class="item center">
                        DOC Type: {{DocTypeName}}
                    </div>
                </div>
            </ion-content>
            <div style="background-color:#284f9a !important; color: white !important;" class="tabs tabs-icon-top">
                <a ng-click="takePhoto()" class="tab-item">
                    <i class="icon ion-camera"></i>
                    Take Photo
                </a>
                <a ng-click="UploadDoc()" class="tab-item">
                    <i class="icon ion-arrow-up-a"></i>
                    Upload Doc
                </a>
                <a ng-click="openModal()" class="tab-item">
                    <i class="icon ion-document-text"></i>
                    Doc Type
                </a>
            </div>
        </ion-slide>