3
votes

I'm with a Ionic app which has a side menu where I've put some buttons in as an index for a large html content. When I click on sided menu button element.scrollIntoView(false) that scrolls an ion-scroll container to the element.
The problem I've found is that I can scroll down and continue reading the html but I can't scroll up.
The ion-scroll definition:

<ion-scroll delegate-handle="contentScroll" zooming="true" min-zoom="1.0" height="100%" style="height:100%" direction="['x','y']">
    <div id="page-container" style="padding: 45px 5px 5px 5px;text-align: justify;">                                            
     </div>
</ion-scroll>

A button definition:

<ion-content ng-controller="ScrollCtrl as scroll"> 
       <button class="button" ng-click="scroll.to('markElementN')" menu-close style="width:100%">ElementN</button>
</ion-content>

scroll.to function is:

function(mark) {
  if (mark == undefined || typeof mark != 'string' || mark.length < 1) {
    return;
  }
  var ob = document.getElementById(mark);
  if (ob) {
    ob.scrollIntoView(false);
  }
}

¿anyone with the same issue?
I should add that I can scroll down and up again but not upper than the element I scrolled into view

2

2 Answers

0
votes

Answering myself... too sad... I suposse.
Ok, after google'ing lot of pages finally I found that the problem starts with scrollIntoView itself so I had to change it by scrollBy function.
Bad Luck, better for the next with same problem

0
votes

I found this post after days of trying to find an answer. The OP's answer did not fix my problem. But hopefully this saves someone time.

Our problem was from mixing element.scrollIntoView() and ionic's scrollDelegate. We needed to scroll to a field when it had invalid data but didn't have Ids (which anchor scroll needs to work). I ended up getting the element by name, setting the id and passing that to the anchorScroll() on the scroll delegate.